将列样式应用于表体元素

I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.

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

Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css. Thanks a lot.

这里举一个例子,我添加了一个名为“body-right”的CSS类。我想要的结果是“值”列中的所有表体元素应该“右对齐”除了标题列。如何在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>

2 个解决方案

#1

Use this:

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

Example

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>

#2

You can acheive this by specifying inline style for the header section seperately. or make a little change in the css like

您可以通过单独指定标题部分的内联样式来实现此目的。或者像css那样做一点改变

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

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

#1