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
精彩评论