Question

我想在不使用特定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;
}

我希望包含文字“Five”的TD没有边框但是我不想使用类。

Answer 1

:last-child选择器应该这样做，但它是not supported in any version of IE。

我担心你别无选择，只能上课。

Answer 2

您可以使用相对规则：

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

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

Answer 3

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

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

有关更多信息以及与不同浏览器的兼容性，请参阅the MDN 查看W3C CSS guidelines了解详情。

Answer 4

你可以使用last-child伪类

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

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

Answer 5

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

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

Answer 6

尝试：

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

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

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

应该足够了。

Answer 7

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

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

Answer 8

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

Answer 9

在jQuery中，只要在执行以下内容之前静态或动态创建表：

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

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

Answer 10

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

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

Answer 11

不能直接回答您的问题，但使用＆lt; tfoot＆gt;可能会帮助你实现你所需要的，当然你也可以为你设计风格。

Answer 12

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

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

Answer 13

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

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

请注意，IE也不支持它。

Answer 14

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

享受......

我想要相同而不是边框我希望它使用图像......： - ）

Answer 15

还有一种不同的方法..这适用于非静态的表格......对于该列，基本上使用<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>

使用css在表格中设置最后一个td

15 个答案: