Question

我有一个HTML页面，其中我希望我的内容居中，但是，在该页面的特定表格中，我需要让许多单元格左对齐，许多单元格右对齐并且一个单元格中心对齐。这是一段HTML＆amp; CSS应该让你知道我正在尝试做什么：


<!DOCTYPE HTML PUBLIC 
   "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>
   .contentWrapper {
      width: 1000px;
      border: 1px solid black;
      margin: auto;
   }

   .centerAligned {
      text-align: center;
   }

   .myTable td {
      width: 200px;
      text-align: left;
   }

   .myTable td.label {
      text-align: right;
   }
</style>

</head>

<body>

   <div class="contentWrapper centerAligned">

      <p>A label for this table...</p>

      <table class="myTable" border="1" align="center">
         <tr>
            <td class="label">Label 1 (Right Aligned)</td>
            <td>Value 1 (Left Aligned)</td>
            <td class="label">Label 2 (Right Aligned)</td>
            <td>Value 2 (Left Aligned)</td>
         </tr>
         <tr>
            <td class="label">Label 3 (Right Aligned)</td>
            <td>Value 3 (Left Aligned)</td>
            <td class="label">Label 4 (Right Aligned)</td>
            <td>Value 4 (Left Aligned)</td>
         </tr>
         <tr>
            <td colspan="4" class="centerAligned">
               <input type="button" value="Push Me!">
            </td>
         </tr>
      </table>

      <p>Some more content...</p>

   </div>

</body>

</html>

我真的不想在每个td中放入一个类来处理它们应该如何对齐，所以我选择为左边的“.myTable td”设置默认对齐方式。这允许我让所有“值”单元格没有类，但我仍然需要为我的“标签”单元格定义一个以便为这些单元格进行正确的对齐。

当谈到底部的按钮时，我想要居中对齐，我希望能够使用“centerAligned”类。不幸的是，在这里使用它并没有做任何事情，因为“.myTable td”类被认为是“更精确”，并且该单元格被赋予左对齐而不是居中对齐。

我在其他地方使用“centerAligned”，所以我不想简单地删除该类，也不想将名称更改为其他名称。我可以这样做：


.centerAligned, .myTable td.centerAligned {
   text-align: center;
}

这似乎有效，但这件事对我来说似乎有点臭。是否有更好的方法来处理这些表格单元格的样式以获得我想要的效果而无需为每个单独的td定义特定的类？

谢谢！

Answer 1

使用col

看看这里： http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

或者这里是XHTML http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-tables.html#sec_26.2

Answer 2

为什么不为标签使用'th'标签并为其添加css？这样你就不需要在所有td'标签'上放置标签类。所以

.myTable th { width: 200px; text-align: right; }

Answer 3

正如另一个答案中所提到的，应该可以使用colgroup和col完成，但它不能，而colspan就是为什么，'colspanned'行怎么会知道哪个col从哪个方向调整？

我或许会建议:nth-child，但我认为当遇到colspan时会遇到同样的问题，和你不会得到IE支持所以这里是一个小提琴，不需要课程，仍然使用特异性来获得理想的结果

基于使用colspan打开代码的工作示例 - JSFIDDLE

Answer 4

您可以使用jQuery

$('#myTable tr td:eq(0)').css('text-align', 'left');
$('#myTable tr td:eq(1)').css('text-align', 'center');
$('#myTable tr td:eq(2)').css('text-align', 'right');

eq基于零。因此，所有第一个单元格将保持对齐，所有第二个单元格将居中对齐，依此类推。根据您的需求进行调整。

Answer 5

您没有完全描述细胞需要右对齐而左对齐的位置。但是，正如Bazz建议您可以使用col为该col中的所有s设置样式，或者如果您的右对齐单元格位于同一行，则可以对样式执行相同的操作。

如果您能够使用col，您只需要：

<table>
 <col>
 <col class="label">
 <col>
 <tr>...

然后

.label { text-align: right }

你做这件事的方式并没有错......

CSS中的规则选择

5 个答案:

基于使用colspan打开代码的工作示例 - JSFIDDLE