如何将“列”中的元素右对齐？

Question

如何将“列”中的元素右对齐？

4

我有一个简单的两列表格，我想要一种方式将第一列的数据向右对齐，并能够分别样式化这两个元素。也许表格不是最好的解决方案，但我不知道还有什么其他方法可以尝试。我尝试使用列组，但它并没有起作用。即使我尝试将 text-align: right 应用于“label”元素。

<table>
<colgroup>
<col class="label" />
<col class="price" />
</colgroup>
<tr>
<td><label>Subtotal:</label></td>
<td>$135.00</td>
</tr>
<tr>
<td><label>Taxes:</label></td>
<td>$11.23</td>
</tr>
</table>

- Damon

6个回答

2

给你的HTML标签添加id或class。例如.. 然后使用CSS按照你的意愿进行样式设置。

tr#cell1{
text-align:right;

}

对于每行你想单独对齐的内容，请使用此方法

- rdp

1

标签由于是内联元素，所以无法右对齐。如果您将其设置为 display:block 或 display:inline-block，它将填满整个表格单元格并应用右对齐：

label {
 display: block;
 text-align: right;
}

- Bazzz

这是一个很好的观点。解释了之前为什么不起作用。 - Damon

0

这样就可以了！

<html>
<head>
    <style>
    .one { width:100px; border:1px solid red; }
    .one label { display:block; width:100%; text-align:right; }
    .two { width:150px; border:1px solid green; }
    </style>
</head>

<body>
<table>
  <tr>
   <td class="one"><label>one</label></td>
   <td class="two">two</td>
  </tr>
</table>
</body>
</html>

- Evan Nagle

不需要在td元素内部放置div来对齐文本。将text-align规则添加到表格单元即可。 - Dan

我一直发现给 td 添加样式会惹老版本的 IE 生气。但是，我不得不承认 div 标签已经成为了我不可治愈的 “div 病” 的象征。祝好，E. - Evan Nagle

根据提问者的问题，移除了div并添加了一个标签。 - Evan Nagle

0

尝试给表格单元格添加一个类。

<td class="sub">…</td>

然后使用CSS对它们进行样式设置：

table td {
  // style for all except .sub
}

table td.sub {
  text-align: right;
  // and other styles that differ from rest
}

- polarblau

0

如果您不想将 td 元素转换为 th ，您可以这样做：

<style type="text/css">
  table td:first-child { text-align: right; }
</style>

<table>
  <tr>
    <td>Right aligned</td>
    <td>Left aligned</td>
  </tr>
</table>

它在Firefox、Chrome和IE 8上运行良好（可能也适用于IE 7）。

- Emmanuel Bourg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Klemen Slavič · Accepted Answer

由于您可能在谈论标题单元格，我会采用不同的方法：

<style type="text/css">
  table th { text-align: right; }
  table td { text-align: left; }
</style>

<table>
  <tr>
    <th>Right aligned</th>
    <td>Left aligned</td>
  </tr>
</table>