blocks|key|1455574|text|您可以使用相关规则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455575|table+td+%2B+td+%2B+td+%2B+td+%2B+td+{
++border:+none;
}|code-block|syntax|javascript|1455576|只有在运行时没有确定列数的情况下，这才有效。|1455577|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use relative rules:</p>

<pre><code>table td + td + td + td + td {
  border: none;
}
</code></pre>

<p>This only works if the number of columns isn't determined at runtime.</p>


blocks|key|1455622|text|:last-child选择器应该可以做到这一点，但它是not+supported+in+any+version+of+IE。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1455623|恐怕您别无选择，只能使用类。|1455624|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/contents.html^0|0|B|R|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>The <code>:last-child</code> selector should do it, but it's <a href="http://www.quirksmode.org/css/contents.html" rel="noreferrer">not supported in any version of IE</a>.</p>

<p>I'm afraid you have no choice but to use a class.</p>


blocks|key|1671083|text|您可以使用:last-of-type伪类：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1671084|tr+>+td:last-of-type+{
++++/*+styling+here+*/
}|code-block|syntax|javascript|1671085|有关更多信息以及与不同浏览器的兼容性，请参阅the+MDN。|1671086|有关更多信息，请查看W3C+CSS+guidelines。|1671087|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/:last-of-type|1|http://www.w3.org/Style/CSS/^0|5|D|0|0|M|7|0|0|A|I|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>You can use the <code>:last-of-type</code> pseudo-class:</p>

<pre><code>tr &gt; td:last-of-type {
    /* styling here */
}
</code></pre>

<p>See <a href="https://developer.mozilla.org/en/CSS/:last-of-type" rel="noreferrer">the MDN</a> for more info and compatibility with the different browsers.<br>
Check out the <a href="http://www.w3.org/Style/CSS/" rel="noreferrer">W3C CSS guidelines</a> for more info.</p>


blocks|key|1670691|text|您可以使用最后一个孩子的psuedo类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1670692|table+tr+td:last-child+{
++++border:+none;
}|code-block|syntax|javascript|1670693|这将仅设置最后一个td的样式。它还没有完全被支持，所以它可能不适合|1670694|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you could use the last-child psuedo class</p>

<pre><code>table tr td:last-child {
    border: none;
}
</code></pre>

<p>This will style the last td only. It's not fully supported yet so it may be unsuitable</p>


blocks|key|1671159|text|尝试使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671160|tr:last-child+td:last-child{
++++border:none;
++++/*any+other+style*/
}|code-block|syntax|javascript|1671161|这只会影响表中的最后一个td元素，假设这是唯一的一个(否则，您只需标识您的表)。然而，是非常通用的，如果你在表格中添加更多的内容，它会适应上一个TD。所以如果这是一个特殊的案例|1671162|td:nth-child(5){
++++border:none;
}|1671163|应该足够了。|1671164|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>try with:</p>

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

<p>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 </p>

<pre><code>td:nth-child(5){
    border:none;
}
</code></pre>

<p>should be enough.</p>


blocks|key|1455832|text|如果你已经在使用javascript了，看看jQuery吧。它支持独立于浏览器的“最后一个孩子”选择器，你可以这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455833|$("td:last-child").css({border:"none"})|code-block|syntax|javascript|1455834|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>$("td:last-child").css({border:"none"})
</code></pre>


blocks|key|1670647|text|Javascript是实现这一客户端功能的唯一可行方法(也就是说，CSS对您没有帮助)。在jQuery中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1670648|$("table+td:last").css("border",+"none");|code-block|syntax|javascript|1670649|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Javascript is the only viable way to do this client side (that is, CSS won't help you). In jQuery:</p>

<pre><code>$("table td:last").css("border", "none");
</code></pre>


blocks|key|1670846|text|您可以使用HTML4.0+(link)中指定的col元素。它可以在所有浏览器中运行。您可以给它一个ID、一个类或一个内联样式。唯一需要注意的是，它会影响所有行中的整个列。示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1670847|<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>|code-block|syntax|javascript|1670848|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html4/struct/tables.html#edef-COL^0|E|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use the col element as specified in HTML 4.0 (<a href="http://www.w3.org/TR/html4/struct/tables.html#edef-COL" rel="nofollow noreferrer">link</a>). 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:</p>

<pre><code>&lt;table&gt;
    &lt;col /&gt;
    &lt;col width="50" /&gt;
    &lt;col id="anId" /&gt;
    &lt;col class="whatever" /&gt;
    &lt;col style="border:1px solid #000;" /&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;One&lt;/td&gt;
            &lt;td&gt;Two&lt;/td&gt;
            &lt;td&gt;Three&lt;/td&gt;
            &lt;td&gt;Four&lt;/td&gt;
            &lt;td&gt;Five&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


blocks|key|1671212|text|您可以使用:+last+-+of+-type来捕获表的最后一列。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671213|<style>
.table+>+tbody+>+tr+>+td:last-of-type+{
++++/*+Give+your+style+Here;+*/
}
</style>|code-block|syntax|javascript|1671214|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use the :last-of-type to catch last column of your table.</p>
<pre><code>&lt;style&gt;
.table &gt; tbody &gt; tr &gt; td:last-of-type {
    /* Give your style Here; */
}
&lt;/style&gt;
</code></pre>


blocks|key|1455975|text|在jQuery中，假设在执行以下操作之前静态或动态创建表：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455976|$("table+tr+td:not(:last-child)").css({+"border-right":"1px+solid+#aaaaaa"+});|code-block|syntax|javascript|1455977|将右边框添加到表格行中除最后一个单元格之外的每个单元格。|1455978|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In jQuery, provided the table is created either statically or dynamically prior to the following being executed:</p>

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

<p>Just adds a right border to every cell in a table row except the last cell.</p>


blocks|key|1455807|text|不能直接回答你的问题，但使用可能会帮助你实现你需要的，当然你也可以设计tfoot。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455808|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Not a direct answer to your question, but using &lt;tfoot> might help you achieve what you need, and of course you can style tfoot.</p>


blocks|key|1455861|text|对于IE，使用CSS表达式如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455862|<style+type="text/css">
table+td+{+
++h:+expression(this.style.border+=+(this+==+this.parentNode.lastChild+?+'none'+:+'1px+solid+#000'+)+);
}
</style>|code-block|syntax|javascript|1455863|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For IE, how about using a CSS expression:</p>

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


blocks|key|1671024|text|我也在寻找一种方法来做到这一点，并发现这一点，可以对其他人有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671025|#table+td:last-of-type+{+border:+none;+}|code-block|syntax|javascript|1671026|请注意，IE也不支持它。|1671027|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I was looking for a way to do this too and found this, could be useful for other people:</p>

<pre><code>#table td:last-of-type { border: none; }
</code></pre>

<p>Note that it's not supported by IE either.</p>


blocks|key|1455929|text|这段代码将为所有节点添加边框，并删除最后一个节点(TD)的边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455930|<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>|code-block|syntax|javascript|1455931|享受吧..。|1455932|我想要相同的，而不是边框，我想使用图像...+:-)|1455933|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is the code that will add border for all the nodes and will remove the border for the last node(TD).</p>

<pre><code>&lt;style type="text/css"&gt;
    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' ) );  
    }  
&lt;/style&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Home&lt;/td&gt;
        &lt;td&gt;sunil&lt;/td&gt;
        &lt;td&gt;Kumar&lt;/td&gt;
        &lt;td&gt;Rayadurg&lt;/td&gt;
        &lt;td&gt;Five&lt;/td&gt;
        &lt;td&gt;Six&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Enjoy ...</p>

<p>I want the same instead of border I wanted it using images ... :-)</p>


blocks|key|1456042|text|还有一种不同的方法..这将适用于不是静态的表...基本上，对该列使用<th>而不是<td>：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1456043|<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>|code-block|syntax|javascript|1456044|entityMap^0|Y|4|15|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>There is also a different approach.. and this would work for tables that aren't static... basically use <code>&lt;th&gt;</code> instead of <code>&lt;td&gt;</code> for that column:</p>

<pre><code>&lt;style type="text/css"&gt;
 table td { border: 1px solid black; }
 table th { border: 0px; }
&lt;style&gt;
&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;One&lt;/td&gt;
      &lt;td&gt;Two&lt;/td&gt;
      &lt;td&gt;Three&lt;/td&gt;
      &lt;td&gt;Four&lt;/td&gt;
      &lt;th&gt;Five&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;One&lt;/td&gt;
      &lt;td&gt;Two&lt;/td&gt;
      &lt;td&gt;Three&lt;/td&gt;
      &lt;td&gt;Four&lt;/td&gt;
      &lt;th&gt;Five&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


<p>I want to style the last TD in a table without using a CSS class on the particular TD.</p>

<pre><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;One&lt;/td&gt;
      &lt;td&gt;Two&lt;/td&gt;
      &lt;td&gt;Three&lt;/td&gt;
      &lt;td&gt;Four&lt;/td&gt;
      &lt;td&gt;Five&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

table td 
{ 
  border: 1px solid black;
}
</code></pre>

<p>I want the TD containing the text "Five" to not have a border but again, I do not want to use a class.</p>


Styling the last td in a table with css

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问使用css设置表中最后一个td的样式
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css设置表中最后一个td的样式EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css设置表中最后一个td的样式
EN