问题描述
为什么两边都不显示?
< 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:理论上,您可以使用属性
此外,默认值似乎不会折叠。
更多阅读:
Why both border not showing?
<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
这篇关于为什么< th>和< aad>两者都不显示在这里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!