我有一个 HTML 页面，我希望我的内容在其中居中，但在该页面的特定表格中，我需要让许多单元格左对齐，许多单元格右对齐，一个单元格居中对齐。下面是一段 HTML 和 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 定义特定的类？
谢谢!
最佳答案
使用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 .
关于html - CSS 中的规则选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5317881/