为什么< th>和< aad>两者都不显示在这里？ [英] Why border of <th> and <thead> both not showing here?

问题描述

为什么两边都不显示？

http：/ /jsfiddle.net/r8mA7/

 < table> 
< thead style =border-top：10px solid red; background：yellow> 
< tr>< th style =border-top：10px solid green> Name< / th>< / tr> 
< / thead> 
< tbody> 
< tr>< td> Bob< / td>< / tr> 
< tr>< td>汤姆< / td>< / tr> 
< / tbody> 
< / table> 
  

解决方案

这是预期的行为。

您可以看到它的边框已折叠。

此示例：第一行上的触摸边框折叠，第二行上的触摸边框不会。

在第一行，第一个单元格获得较粗的边框（10px绿色> 5px红色），第二个单元格获得更厚的边框（5px红色> 3px绿色）。

在第二行没有邻接边框折叠，因此10px绿色和3px绿色边框正常显示。

 < table> 
< thead style =border-top：5px solid red; background：yellow> 
< tr> 
< th style =border-top：10px solid green> Name< / th> 
< th style =border-top：3px solid green> Name< / th> 
< / tr> 
< tr> 
< th style =border-top：10px solid green> Name< / th> 
< th style =border-top：3px solid green> Name< / th> 
< / tr> 
< / thead> 
< / table>需要我清除说明吗？
 
 
 
 
 
 
 
 
 
 
 PS：理论上，您可以使用 border-collapse 属性
 
此外，默认值似乎不会折叠。
 
 
 
更多阅读：  http://www.w3.org/TR/CSS2/tables.html#边框 
 
Why both border not showing?

http://jsfiddle.net/r8mA7/
<table>
<thead style="border-top:10px solid red; background:yellow">
    <tr><th style="border-top:10px solid green">Name</th></tr>
</thead>
<tbody>
    <tr><td>Bob</td></tr>
    <tr><td>Tom</td></tr>
</tbody>
</table>

解决方案
It's the expected behaviour. Odd, but expected.

The borders are collapsing, and the thicker one prevails.

You can see it with this example: the touching borders on first row collapse, the ones on the second row don't.

On the first row the first cell gets the thicker border (10px green > 5px red), and the second cell gets the thicker border (5px red > 3px green).

On the second row there are no "adjoining" borders to collapse, so the 10px green and 3px green borders show up normally.
<table>
<thead style="border-top:5px solid red; background:yellow">
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
</thead>
</table>
Need me to clear up the explanation anyhow?

PS: theoretically you could use the border-collapse property on the table to prevent that, but I'm not managing.

Also, the default value seems to be not to collapse.

Further reading: http://www.w3.org/TR/CSS2/tables.html#borders

                        
这篇关于为什么&lt; th&gt;和&lt; aad&gt;两者都不显示在这里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！