使用CSSdevise表格中的最后一个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; } 我希望包含文字“五”的运输署没有边界，但我不想使用一个class。
你可以使用相对规则：
table td + td + td + td + td { border: none; }
这只有在列数没有在运行时确定的情况下才有效。
:last-childselect器应该这样做，但在任何版本的IE中都不支持 。
恐怕你别无select，只能上课。
你可以使用:last-of-type伪类：
tr > td:last-of-type { /* styling here */ }
有关更多信息和与不同浏览器的兼容性，请参阅MDN 。
查看W3C CSS指南了解更多信息。
如果您已经在使用javascript，请查看jQuery。 它支持浏览器独立的“最后一个孩子”select器，你可以做这样的事情。
$("td:last-child").css({border:"none"})
你可以使用最后一个小孩假装课程
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（ 链接 ）中指定的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中，假定在执行以下操作之前静态或dynamic创build表：
$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });
只是在除最后一个单元格之外的表格行中的每个单元格添加一个右边框。
不是你的问题的直接答案，但使用<tfoot>可能会帮助你实现你所需要的，当然你可以风格tfoot。
对于IE，如何使用CSSexpression式：
<style type="text/css"> table td { h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) ); } </style>
我正在寻找一种方法来做到这一点，发现这一点，可能对其他人有用：
#table td:last-of-type { border: none; }
请注意，IE也不支持它。
还有一种不同的方法..这将工作表是不是静态的…基本上使用<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>
这是将为所有节点添加边框的代码，并将删除最后一个节点（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>
请享用 …
我想要相同而不是边界我想要它使用图像… 🙂
