blocks|key|5093579|text|要在每行的底部获得边框，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5093580|table+tr+td+{
border-bottom:+1px+solid+#000;
}|code-block|syntax|javascript|5093581|然后，您需要使用一些javascript来更改最后一个的样式，或者使用IE6/7可能不支持的css|5093582|table+tr:last-child+td+{
border-bottom:+none;
}|5093583|示例：http://jsbin.com/ezolur|offset|length|5093584|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ezolur^0|0|0|0|0|3|N|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

To get a border on the bottom of each row:

<pre><code>table tr td {
border-bottom: 1px solid #000;
}
</code></pre>

Then you would need to use some javascript to change the style of the last one, or use css which is probably not supported in IE6/7

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

example: <a href="http://jsbin.com/ezolur" rel="nofollow">http://jsbin.com/ezolur</a>

blocks|key|1408215|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1408216|<tr>
<td+colspan="3"><hr/></td></tr>|code-block|syntax|javascript|1408217|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|$]]

Try:

<pre><code>&lt;tr&gt;
&lt;td colspan="3"&gt;&lt;hr/&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>

blocks|key|3023064|text|您可以使用倒数第二个子选择器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023065|看看这把小提琴：|3023066|http://jsfiddle.net/SGfQy/|offset|length|3023067|编辑:你能改变你的表格的html吗，你可以把你的第一行放在头中，其余的放在表体中，然后使用|3023068|table+tbody+tr+td{
+++++border-top:1px+solid+red;+++
}|code-block|syntax|javascript|3023069|更新的fiddle：http://jsfiddle.net/SGfQy/1/|3023070|entityMap|0|LINK|mutability|MUTABLE|url|1|http://jsfiddle.net/SGfQy/1/^0|0|0|0|Q|0|0|0|0|A|S|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@$F|18|G|19|1|1A]]|A|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|E]]|X|$5|T|U|V|A|$W|Y]]]]

you can use the last-child selector:

have a look at this fiddle:

<a href="http://jsfiddle.net/SGfQy/" rel="nofollow">http://jsfiddle.net/SGfQy/</a>

EDIT:
can you change the html of your table, you could put your first row in the thead, and the rest of your rows in the tbody, and then use 

<pre><code>table tbody tr td{
 border-top:1px solid red; 
}
</code></pre>

updated fiddle:
<a href="http://jsfiddle.net/SGfQy/1/" rel="nofollow">http://jsfiddle.net/SGfQy/1/</a>

blocks|key|3023088|text|使用CSS2选择器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3023089|table#mytable+tr{
++++border-bottom:1px+solid+black;
}
table#mytable+tr:last-child{
++++border-bottom:none;
}|code-block|syntax|javascript|3023090|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|$]]

Use CSS2 selectors:

<pre><code>table#mytable tr{
 border-bottom:1px solid black;
}
table#mytable tr:last-child{
 border-bottom:none;
}
</code></pre>

blocks|key|3309261|text|以一种与IE7兼容的方式，您可以在没有:last-child选择器的情况下完成此操作。当然，如果没有JavaScript：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3309262|table+tr+%2B+tr+td+{
++++border-top:+1px+black+solid;
}|code-block|syntax|javascript|3309263|实际上，您正在使用顶部边框来绘制一条线，这利用了tr+%2B+tr选择器将匹配除第一行之外的所有行这一事实。|3309264|。|3309265|entityMap^0|J|B|0|0|O|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

You can do this without the <code>:last-child</code> selector, in a way that is also compatible with IE7. And of course without JavaScript:

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

Actually you are using the top border to draw a line, taking advantage of the fact that the <code>tr + tr</code> selector will match all rows except the first one.

<a href="http://jsfiddle.net/7VeWL/" rel="nofollow">See it in action</a>.

I have a <code>table</code> and I want to style at <code>tr</code> level. This does not work on IE7 if I apply the style directly to the <code>tr</code>.

What's the best way to go about styling the <code>table</code> so I get a line across all rows but have no line at the very top or at the very bottom.

So basically, the table should look something like this

<pre><code>col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
</code></pre>

TR level styling

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有一个table，我想要在tr级别的样式。如果我将样式直接应用于tr，则这在IE7上不起作用。设计table样式的最好方法是什么?这样我在所有行上都有一条线，但在最上面或最下面没有线。所以基本上，这个表应该是这样的col1 col2 col3--------------col1 col2 col3----------...

问TR级别样式
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TR级别样式EN