Html 使用 css 为表格中的最后一个 td 设计样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/359821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the last td in a table with css
提问by yoavf
I want to style the last TD in a table without using a CSS class on the particular TD.
我想在不使用特定 TD 上的 CSS 类的情况下设置表格中最后一个 TD 的样式。
<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;
}
I want the TD containing the text "Five" to not have a border but again, I do not want to use a class.
我希望包含文本“五”的 TD 没有边框，但同样，我不想使用类。
采纳答案by sblundy
You can use relative rules:
您可以使用相对规则：
table td + td + td + td + td {
border: none;
}
This only works if the number of columns isn't determined at runtime.
这仅适用于在运行时未确定列数的情况。
回答by yoavf
The :last-childselector should do it, but it's not supported in any version of IE.
在:last-child选择应该这样做，但它不是在IE的任何版本的支持。
I'm afraid you have no choice but to use a class.
恐怕你别无选择，只能使用一个类。
回答by Matthew Layton
You can use the :last-of-typepseudo-class:
您可以使用:last-of-type伪类：
tr > td:last-of-type {
/* styling here */
}
See the MDNfor more info and compatibility with the different browsers.
Check out the W3C CSS guidelinesfor more info.
有关更多信息以及与不同浏览器的兼容性，请参阅MDN。
查看W3C CSS 指南了解更多信息。
回答by Neil Aitken
you could use the last-child psuedo class
你可以使用 last-child 伪类
table tr td:last-child {
border: none;
}
This will style the last td only. It's not fully supported yet so it may be unsuitable
这将仅设置最后一个 td 的样式。它还没有得到完全支持，所以它可能不合适
回答by joshperry
If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.
如果您已经在使用 javascript，请查看 jQuery。它支持浏览器独立的“last-child”选择器，你可以做这样的事情。
$("td:last-child").css({border:"none"})
回答by Kurt Poehler
try with:
尝试：
tr:last-child td:last-child{
border:none;
/*any other style*/
}
this will only affect the very last td element in the table, assuming is the only one (else, you'll just have to identify your table). Though, is very general, and it will adapt to the last TD if you add more content to your table. So if it is a particular case
这只会影响表中的最后一个 td 元素，假设是唯一的元素（否则，您只需要标识您的表）。虽然，非常通用，如果您向表中添加更多内容，它将适应最后一个 TD。所以如果是特殊情况
td:nth-child(5){
border:none;
}
should be enough.
应该够了。
回答by nickf
Javascript is the only viable way to do this client side (that is, CSS won't help you). In jQuery:
Javascript 是执行此客户端的唯一可行方法（也就是说，CSS 不会帮助您）。在 jQuery 中：
$("table td:last").css("border", "none");
回答by Darko Z
You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:
您可以使用 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>
回答by Darko Z
In jQuery, provided the table is created either statically or dynamically prior to the following being executed:
在 jQuery 中，如果在执行以下操作之前静态或动态创建表：
$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });
Just adds a right border to every cell in a table row except the last cell.
只需为表格行中的每个单元格添加一个右边框，除了最后一个单元格。
回答by rachel
I was looking for a way to do this too and found this, could be useful for other people:
我也在寻找一种方法来做到这一点，发现这对其他人有用：
#table td:last-of-type { border: none; }
Note that it's not supported by IE either.
请注意，IE 也不支持它。
