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

时间:2008-12-11 15:56:05

标签: html css html-table

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

14 个答案:

答案 0 :(得分:81)

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

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

答案 1 :(得分:37)

您可以使用相对规则:

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

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

答案 2 :(得分:28)

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

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

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

答案 3 :(得分:19)

你可以使用last-child伪类

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

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

答案 4 :(得分:16)

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

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

答案 5 :(得分:10)

尝试:

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

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

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

应该足够了。

答案 6 :(得分:3)

Javascript是唯一可行的方法来做这个客户端(也就是说,CSS不会帮助你)。在jQuery中:

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

答案 7 :(得分:2)

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

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

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

答案 8 :(得分:2)

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

答案 9 :(得分:1)

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

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

请注意,IE也不支持它。

答案 10 :(得分:1)

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

答案 11 :(得分:1)

对于IE,如何使用CSS表达式:

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

答案 12 :(得分:0)

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

答案 13 :(得分:0)

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

享受......

我想要相同而不是边框​​我希望它使用图像......: - )

豫ICP备18024241号-1