开发者

Why border of <th> and <thead> both not showing here?

开发者 https://www.devze.com 2022-12-29 06:28 出处:网络
Why both border not showing? http://jsfiddle.net/r8mA7/ <table> <thead style=\"border-top:10px solid red; background:yellow\">

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


You can use the <thead> element as the selector like this:

thead { background: red; }

You can see an example here


Give a class name to your table. And style it as below

<style>
.mytable thead{
//your style goes here
}


</style>

EDIT:

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

Try this code. The border of thead and th are being shown. May be th has a greater precedence when there is a same style attribute conflict between th and thead

0

精彩评论

暂无评论...
验证码 换一张
取 消