使用 CSS 对表中的最后一个 td 进行样式化

问题描述

我想在表中对最后一个 TD 进行风格，而不需要在特定的 TD 上使用 CSS 类。

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td
{
  border: 1px solid black;
}

我想要 TD 包含文本”Five” 没有边框，但是再次，我不想使用一个类。

最佳解决方案

您可以使用相关规则：

table td + td + td + td + td {
  border: none;
}

只有在运行时没有确定列数时，这才有效。

次佳解决方案

:last-child 选择器应该做，但它是 not supported in any version of IE 。

我恐怕别无选择，只能用一个课。

第三种解决方案

您可以使用:last-of-type pseudo-class：

tr > td:last-of-type {
    /* styling here */
}

有关更多信息和与不同浏览器的兼容性，请参阅 the MDN 。查看 W3C CSS guidelines 了解更多信息。

第四种方案

如果你已经在使用 JavaScript，看看 jQuery 。它支持浏览器独立的”last-child” 选择器，你可以这样做。

$("td:last-child").css({border:"none"})

第五种方案

你可以使用 last-child psuedo 类

table tr td:last-child {
    border: none;
}

这将仅仅是最后一个 td 的风格。它尚未完全支持，因此可能不适用

第六种方案

尝试：

tr:last-child td:last-child{
    border:none;
    /*any other style*/
}

这只会影响表中最后一个 td 元素，假设是唯一的 (否则，你只需要识别你的表) 。尽管如此，如果您将更多的内容添加到表中，那么它将会适应最后一个 TD 。所以如果是一个特定的情况

td:nth-child(5){
    border:none;
}

应该够了

第七种方案

Javascript 是唯一可行的方法来做这个客户端 (即 CSS 不会帮助你) 。在 jQuery 中：

$("table td:last").css("border", "none");

第八种方案

您可以使用 HTML 4.0(link) 中指定的 col 元素。它适用于每个浏览器。你可以给它一个 ID 或一个类或一个内联样式。只需要注意的是它会影响所有行的整个列。例：

<table>
    <col />
    <col width="50" />
    <col id="anId" />
    <col class="whatever" />
    <col style="border:1px solid #000;" />
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>

第九种方案

在 jQuery 中，只要在执行以下操作之前静态或动态创建表：

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });

只需在表格列中的每个单元格添加一个右边框，除了最后一个单元格。

参考文献

Styling the last td in a table with css

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

使用 CSS 对表中的最后一个 td 进行样式化