Question

我有一个HTML表格，其中一些列单元格的文本必须左对齐并以其他列为中心。如何避免在每个单元格上设置CSS类？可以简化一下吗？

我在JsFiddle上创建了一个示例。

这是HTML：

<table id="myTbl">
    <colgroup>
        <col class="Col-1">
        <col class="Col-2">
        <col class="Col-3">
    </colgroup>
    <tr>
        <td class="makeItLeft">&nbsp</td><td class="makeItCenter">AAA</td><td class="makeItCenter">BBB</td>
    </tr>
    <tr>
        <td class="makeItLeft">DDD</td><td class="makeItCenter">4</td><td class="makeItCenter">7</td>
    </tr>
    <tr>
        <td class="makeItLeft">EEE</td><td class="makeItCenter">2</td><td class="makeItCenter">6</td>
    </tr>
    <tr>
        <td class="makeItLeft">FFF</td><td class="makeItCenter">2</td><td class="makeItCenter">5</td>
    </tr>
    <tr>
        <td class="makeItLeft">GGG</td><td class="makeItCenter">&#x2713;</td><td class="makeItCenter">88</td>
    </tr>
</table>

这是CSS：

#myTbl {
    width: 96%;
    background-color: green;
}

#myTbl td {
    vertical-align:middle;
}

.Col-1 {
    background-color: red;
}

.Col-2 {
    background-color: yellow;
}

.Col-3 {
    background-color: blue;
}

.makeItCenter {
    text-align: center;
}

.makeItLeft {
    text-align: left;
}

Answer 1

您可以制定一般规则，将对齐设置为居中，然后使用左对齐覆盖第一列：

#myTbl td {
    text-align: center;
}

#myTbl td:first-child {
    text-align: left;
}

Answer 2

使用CSS Pseudo-Class Selectors的力量：

#myTbl td {
    text-align: center;
}

#myTbl tr td:nth-child(1) {
    text-align: left;
}

CSS Pseudo-Class选择器允许您为这些棘手的情况选择各种类型的东西，如第一类，第一个孩子，第n个孩子，最后一个孩子，只有类型等等。上面的代码将设置所有td s的内容居中的规则，这些tr s都是td s的子项。然后，对于每个tr的每个第一个{{1}}子项，它将使用左对齐规则覆盖居中。

Answer 3

在你的Css上添加这些行

#myTbl tr td:nth-child(2),#myTbl tr td:nth-child(3){
    text-align:center;
}
#myTbl tr td:nth-child(1){
    text-align:left;
}

并删除以下代码以及td类

.makeItCenter {
text-align: center;
}

.makeItLeft {
 text-align: left;
}

在每个html表格单元格上避免使用CSS类？

3 个答案: