使用CSS样式为表格中的最后一个<td>元素添加样式

Question

我想要在表格中样式化最后一个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元素中包含的文本"Five"没有边框，但是我不想使用类(class)选择器。

- vchoke

---

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

我想保持HTML静态，并能够在不添加代码或大量CSS类和ID的情况下更改样式。 - vchoke

你可以在所有最后一个单元格上放置class="last"，然后永远不更改它，根据设计需要使用它或不使用它。 - Nicole

Answer 1

:last-child 选择器应该可以解决问题，但是它在任何版本的IE中都不被支持。

恐怕你只能使用类了。

- yoavf

---

你说得太早了，显然有一种方法可以避免使用类 =) - Albert

并不完全正确，>IE8是支持这个的，但并没有得到广泛采用。如果您可以不依赖于IE8（而OP似乎也没有问题），那么这是最佳方案。 - Jesse

有些过时，但功能很棒！ - dbrin

Answer 2

你可以使用：last-of-type伪类：

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

请查看MDN了解更多信息以及不同浏览器的兼容性。
请查看W3C CSS指南了解更多信息。

- Matthew Layton

Answer 3

您可以使用相对规则：

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

这仅在列数在运行时未确定时才有效。

- sblundy

---

它有其用途，特别是如果你像这个人一样，不想太多改变HTML来支持CSS。 - sblundy

可以了！谢谢。是的，HTML是静态的，我不想添加大量的CSS类或ID来样式化单元格。 - vchoke

有趣的技巧，但它比:last-child不够灵活，在IE上也不能更好地工作... 仍然值得记住！ - PhiLho

如果您不关心IE支持，为什么不使用:last-child作为明显的解决方案呢？在我看来，这只是丑陋的... - Jesse

如果我有一个包含很多<td>的表格怎么办？如果我使用PHP从MySQL数据库中显示表格数据，我需要在CSS中放很多td吗？ - Mai

Answer 4

你可以使用:last-child伪类。

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

这将仅为最后一个 td 添加样式。它目前尚未完全支持，因此可能不适用。

- Demoli

---

那会给最后一列加上样式，而不是行。 - ceejayoz

这正是OP所要求的，如果我的描述有些不准确，我很抱歉。 - Neil Aitken

Answer 5

使用以下方式尝试：

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

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

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

应该足够了。

- Kurt Poehler

---

请提供更多信息和细节，说明这如何解决问题。这将有助于原帖作者和未来的搜索者。 - SnareChops

非常好。对于响应式表格的样式有很大帮助。tr:last-child td:last-child == 表格中的最后一个tr，tr中的最后一个td。 - André R. Kohl

Answer 6

如果您已经在使用 JavaScript，可以看一下 jQuery。它支持浏览器无关的 "last-child" 选择器，您可以像这样做。

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

- joshperry

---

不，last-child 意味着父元素的最后一个子元素，因此我的选择器表示“给我这一行的最后一个子元素”。 - joshperry

谢谢，我用它来加粗表格中的总计行。非常简单。 - Rick

对于许多情况，这个方法非常有效，但是如果你正在更改类别，请注意，这将仅在该项目上设置样式一次，并且该属性将不再随 CSS 类别的动态更改而改变。 - Nicole

我认为nickf是正确的。从我测试和http://api.jquery.com/last-child-selector/的文档来看。 - Code Commander

@Code，是的，我认为你是正确的。当我最初撰写这个答案时，文档有点模糊不清。 - joshperry

Answer 7

Javascript是唯一可行的客户端解决方案（CSS无法帮助您）。在jQuery中：

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

- nickf

---

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

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

Answer 8

您可以使用在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>

- Darko Z

---

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

Answer 9

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

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

- Habib_95

Answer 10

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

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

这个代码会在表格的每一行除了最后一个单元格之外，给每个单元格添加右边框。

- Jim R.