71

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

4

15 回答 15

91

选择:last-child器应该这样做，但任何版本的 IE 都不支持它。

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

于 2008-12-11T16:02:34.190 回答
43

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

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

有关更多信息以及与不同浏览器的兼容性，请参阅MDN 。
查看W3C CSS 指南以获取更多信息。

于 2012-05-09T15:04:34.870 回答
39

您可以使用相对规则：

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

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

于 2008-12-11T16:00:07.283 回答
27

你可以使用 last-child psuedo 类

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

这将仅设置最后一个 td 的样式。它尚未完全支持，因此可能不合适

于 2008-12-11T16:05:52.623 回答
19

尝试：

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

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

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

应该足够了。

于 2016-01-28T19:09:19.343 回答
16

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

$("td:last-child").css({border:"none"})
于 2008-12-11T16:06:57.550 回答
4

Javascript 是唯一可行的方式来做这个客户端（也就是说，CSS 不会帮助你）。在 jQuery 中：

$("table td:last").css("border", "none");
于 2008-12-11T16:04:49.897 回答
3

您可以使用 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>
于 2008-12-11T21:41:18.843 回答
3

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

<style>
.table > tbody > tr > td:last-of-type {
    /* Give your style Here; */
}
</style>
于 2020-07-02T11:25:37.483 回答
2

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

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

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

于 2009-09-03T15:03:18.140 回答
1

不是直接回答您的问题，但使用 <tfoot> 可能会帮助您实现所需的功能，当然您可以设置 tfoot 样式。

于 2008-12-11T16:06:23.683 回答
1

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

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
于 2008-12-11T16:16:00.683 回答
1

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

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

请注意，IE 也不支持它。

于 2011-10-27T17:05:26.893 回答
0

这是将为所有节点添加边框并删除最后一个节点（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>

享受 ...

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

于 2009-08-29T10:37:35.010 回答
0

还有一种不同的方法..这适用于非静态表...基本上使用<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>
于 2009-09-26T06:58:34.683 回答