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

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