使用 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 没有边框，但是我不想使用类。

181450 次浏览
小开
最佳答案

你可以使用相对规则:

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

只有在运行时没有确定列数的情况下，这种方法才会起作用。

小开

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

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

小开

Javascript 是完成这个客户端的唯一可行的方法(也就是说，CSS 帮不了你):

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

you could use the last-child psuedo class

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

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

小开

这不是对你问题的直接回答，但是使用 < tfoot > 可以帮助你达到你的需要，当然你也可以设计 tfoot。

小开

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

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

对于 IE，使用 CSS 表达式怎么样:

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

可以使用 HTML 4.0(链接)中指定的 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>
小开

这段代码将为所有节点添加边框，并删除最后一个节点(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>

好好享受。

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

小开

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

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

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

小开

There is also a different approach.. and this would work for tables that aren't static... basically use <th> instead of <td> for that column:

<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>
小开

我也在寻找这样做的方法，结果发现这个，可能对其他人有用:

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

请注意，IE 也不支持它。

小开

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

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

有关不同浏览器的更多信息和兼容性，请参见 MDN。
查看 W3C CSS 指南了解更多信息。

小开

试试:

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

这只会影响表中的最后一个 td 元素，假设它是唯一的(否则，您只需要标识表)。但是，它是非常一般的，如果您向表中添加更多的内容，它将适应上一个 TD。因此，如果这是一个特殊的情况

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

应该够了。

小开

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

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

提交答案