将列样式应用于表体元素

Question

我在html中创建了下表。我想在我添加了css类的列中将一个样式应用于表体元素。但样式不应该应用于标题列。只有身体栏。

这里举一个例子，我添加了名为＆＃34; body-right＆＃34;的CSS类。我想要的结果是列中的所有表体元素＆＃34;值＆＃34;应该＆＃34;右对齐＆＃34;除标题栏外。如何在CSS中实现这一点。 非常感谢。

<table>
    <thead>
        <tr>
            <td>Criteria</td>
            <td>Description</td>
            <td class="body-right">Value</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>GGGGGG</td>
            <td>35.63</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>HHHHH</td>
            <td>68.26</td>
        </tr>
        <tr>
            <td>MNP</td>
            <td>KKKKK</td>
            <td>45.26</td>
        </tr>
    </tbody>
</table>

Answer 1

使用此：

tbody td:nth-of-type(3) {
  text-align: right;
}

示例

table {
  border-spacing: 0;
  border-collapse: collapse;
  font: 14px verdana;
}

td {
  padding: 0.2em;
  border: 1px solid gray;
}

tbody td:nth-of-type(3) {
  text-align: right;
  background: yellow;
  width: 4em;
}

<table>
    <thead>
        <tr>
            <td>Criteria</td>
            <td>Description</td>
            <td class="body-right">Value</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>GGGGGG</td>
            <td>35.63</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>HHHHH</td>
            <td>68.26</td>
        </tr>
        <tr>
            <td>MNP</td>
            <td>KKKKK</td>
            <td>45.26</td>
        </tr>
    </tbody>
</table>

Answer 2

您可以通过单独指定标题部分的内联样式来实现此目的。 或者在CSS中做一点改动 喜欢

  

thead .body-right {text-align：right; }