使用 css 为表格中的最后一个 td 设置样式

Posted 2023-03-05

【中文标题】使用 css 为表格中的最后一个 td 设置样式

【英文标题】：Styling the last td in a table with css

【发布时间】：2010-09-26 11:11:35

【问题描述】：

我想设置表格中最后一个 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 没有边框，但同样，我不想使用类。

【问题讨论】：

你不想使用类的原因是什么？

我想保持 html 静态，并且能够在不添加代码或一堆 css 类和 ID 的情况下更改样式。

您总是可以将class="last" 放在所有最后一个单元格上，然后永远不要更改它，并按照您的设计要求使用或不使用它。

【参考方案1】：

你可以使用相对规则：

table td + td + td + td + td 
  border: none;

这仅适用于在运行时未确定列数的情况。

【讨论】：

它有它的用途，特别是如果你像这个人一样，不想为了支持 CSS 而对 HTML 进行太多更改。

行得通！谢谢。是的，HTML 是静态的，我不想添加一堆 CSS 类或 id 来设置单元格样式。

很有趣的把戏，但它不如 :last-child 灵活，在 IE 上也不能更好地工作......仍然值得记住！

如果您不关心 IE 支持，为什么:last-child 不是显而易见的解决方案？这只是丑陋的海事组织......

如果我的桌子上有很多<td>怎么办？如果我使用 php 从 mysql 数据库的表中显示数据怎么办？我需要在 CSS 中添加很多 td 吗？

【参考方案2】：

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

恐怕你别无选择，只能使用类。

【讨论】：

你说得太早了，显然有一个技巧可以避免使用 class=)

不完全正确，>IE8 确实支持这一点，但还没有被很好地采用。如果您可以在没有 IE8 支持的情况下生活（OP 似乎很好），这是最好的解决方案。

有点过时了。效果很好！

【参考方案3】：

javascript 是执行此客户端的唯一可行方法（也就是说，CSS 不会帮助您）。在 jQuery 中：

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

【讨论】：

这样做的一个缺点是它破坏了内容/样式/行为模型。

使用 jQuery 添加一个类名，然后您可以使用 CSS 进行样式化是语义化的。例如jQuery('#shopping-cart-totals-table tfoot tr:last-child').addClass('last-row')

【参考方案4】：

你可以使用 last-child 伪类

table tr td:last-child 
    border: none;

这只会设置最后一个 td 的样式。它还没有完全支持，所以它可能不合适

【讨论】：

这将设置最后一列的样式，而不是行。

这是 OP 要求的，抱歉，如果我的描述稍有偏差。

【参考方案5】：

不是直接回答您的问题，但使用

可能会帮助您实现所需，当然您可以设置 tfoot 样式。

【讨论】：

不，不会的。他说的是最后一个单元格而不是最后一行。

【参考方案6】：

如果您已经在使用 javascript，请查看 jQuery。它支持独立于浏览器的“last-child”选择器，您可以这样做。

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

【讨论】：

不，last-child 表示父母的最后一个孩子，所以我的选择器说“给我该行的最后一个孩子”

谢谢，我用它来加粗表格中的总行。很容易。

在许多情况下，这非常有效，但请注意，如果您正在更改类，请记住，这将在该项目上设置一次样式，并且该属性不会再随着 CSS 类的更改而动态更改。

我认为 nickf 是对的。根据我的测试和api.jquery.com/last-child-selector 的文档。

@Code，是的，我认为你是正确的。当我最初写这个答案时，文档有点模棱两可。

【参考方案7】：

对于 IE，如何使用 CSS 表达式：

<style type="text/css">
table td  
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );

</style>

【参考方案8】：

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

<table>
    <col />
    <col  />
    <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>

【讨论】：

我的例子与你想做的相反，但你明白我的意思:)

【参考方案9】：

这是为所有节点添加边框并删除最后一个节点（TD）的边框的代码。

<style type="text/css">
    body   
        font-family:arial;font-size: 8pt;  
      
    table td
        border-right: #666 1px solid
      

    table td   
        h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right:  0px solid' ) );  
      
</style>
<table>
    <tr>
        <td>Home</td>
        <td>sunil</td>
        <td>Kumar</td>
        <td>Rayadurg</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

享受...

我想要相同的而不是我想要使用图像的边框...:-)

【参考方案10】：

在 jQuery 中，如果表是在执行以下操作之前静态或动态创建的：

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

只需为表格行中除最后一个单元格之外的每个单元格添加右边框。

【参考方案11】：

还有一种不同的方法.. 这适用于非静态表...基本上使用<th> 而不是<td> 用于该列：

<style type="text/css">
 table td  border: 1px solid black; 
 table th  border: 0px; 
<style>
<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
  </tbody>
</table>

【参考方案12】：

我也在寻找一种方法来做到这一点，发现这可能对其他人有用：

#table td:last-of-type  border: none; 

注意IE也不支持。

【参考方案13】：

您可以使用:last-of-type 伪类：

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

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

【参考方案14】：

尝试：

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

这只会影响表中的最后一个 td 元素，假设是唯一的一个（否则，您只需要标识您的表）。虽然，非常通用，如果您向表格添加更多内容，它将适应最后一个 TD。所以如果是特殊情况

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

应该够了。

【讨论】：

请提供有关如何解决问题的更多信息和详细信息。这将有助于 OP 和其他未来的搜索者。

完美。对响应式表格的样式有很大帮助。 tr:last-child td:last-child == 表中的最后一个 tr，tr 中的最后一个 td

【参考方案15】：

您可以使用 :last-of-type 来捕获表格的最后一列。

<style>
.table > tbody > tr > td:last-of-type 
    /* Give your style Here; */

</style>