Question

我有一个简单的两列表;我想要一种方法将第一列中的数据对齐到右边，并且能够分别设置两个元素的样式。也许桌子不是最好的解决方案，但我不知道还有什么可以尝试。我尝试使用列组，但它不起作用。即使我尝试将text-align: right应用于＆＃39;标签＆＃39;元件。

<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>

Answer 1

由于你可能正在谈论标题细胞，我会采取不同的方法：

<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>

Answer 2

为您的HTML标记提供ID或类。例如...... 然后使用css根据需要设置样式。

tr#cell1{
text-align:right;

}

对于您想要单独对齐的每一行使用此

Answer 3

Label没有正确对齐，因为它是一个内联元素。如果你给它display:block或display:inline-block，它将填满整个表格单元并应用你的右对齐：

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

Answer 4

这应该做！

<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>

Answer 5

尝试为表格单元格提供一个类

<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
}

Answer 6

如果您不想将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）。

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

6 个答案: