Question

我试图给表格的最后一列提供不同的风格，但我不知道如何做到这一点。我添加了列<th>Buy</th>并且它正常工作为另一个<th>..</th>，但我想为最后一列提供不同的样式。还尝试编写类似 <th th-1>Buy</th th-1> 的内容，但没有效果。如果有人有任何想法，请分享：）

以下是代码：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Rating</th>
                <th>Salary</th>
                <th th-1>Buy</th th-1>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Rating</th>
                <th>Salary</th>
                <th th-1>Buy</th th-1>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>61</td>
                <td>$320,800</td>
                <td><div class="checkbox pull-right">
                <label>
                <input type="checkbox"> Buy this player
                </label>
                </div></td>
            </tr>

Answer 1

你需要什么样的风格？你可以用css做出你想要的一切：

  .display td:last-child,
  .display th:last-child {
         background-color: green; 
  }

使用此代码，您将看到绿色背景中的最后一列。

Answer 2

如果您可以选择定义自定义属性th-1，那么您也可以在其中使用class，这样就可以了。

同样的事情是使用css选项@MarcosPérezGude在他的回答中写道，但我建议仅将其应用于th元素，并使用last-of-type。 https://css-tricks.com/pseudo-class-selectors/

：last-child - 选择父级中的最后一个元素。

：last-of-type - 在任何父级中选择此类型的最后一个元素。所以，如果你有两个div，每个div都有一个段落，图像，段落，   图片。然后div img：last-of-type将选择里面的最后一个图像   第一个div和第二个div中的最后一个图像。

.display th:last-of-type {
  background-color: green; 
}

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Rating</th>
                <th>Salary</th>
                <th>Buy</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Rating</th>
                <th>Salary</th>
                <th>Buy</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>DEF</td>
                <td>61</td>
                <td>$320,800</td>
                <td><div class="checkbox pull-right">
                <label>
                <input type="checkbox"> Buy this player
                </label>
                </div></td>
            </tr>
       </tbody>
  </table>

不同的风格到表中的列

2 个答案: