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>
views:
166answers:
4
+2
A:
You can use the <thead> element as the selector like this:
thead { background: red; }
Nick Craver
2010-05-07 13:24:33
i'm giving `thead { border-top:10px solid red}` but not working
metal-gear-solid
2010-05-07 13:26:41
ok see this why green border of th not showing http://jsfiddle.net/r8mA7/
metal-gear-solid
2010-05-07 13:29:16
@metal - Here's an updated example doing that here: http://jsfiddle.net/uwQFW/2/
Nick Craver
2010-05-07 13:29:24
@metal - for that, `table { border-collapse: separate; }`, but only one border will win here :)
Nick Craver
2010-05-07 13:30:51
`border-top:10px solid red` works fine for me. Please check, that your browser actually uses the css style and accepts the `border-top` property.
ablaeul
2010-05-07 13:31:04
@Nick - oh i wasn't aware . ok but how show both borders? is there any way?
metal-gear-solid
2010-05-07 13:33:29
@metal - If it's at the top, give the border to the table itself?, aside from that I'm not sure of a way, but don't rule it out...I've never come across this situation, could be a new trick I'm just unaware of.
Nick Craver
2010-05-07 13:35:46
although +1 for because you found the problem.
metal-gear-solid
2010-05-07 13:50:23
Update answer for +1.
ANeves
2010-05-07 14:40:54
A:
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
Kasturi
2010-05-07 13:25:56
+2
A:
You can't style the <thead> itself. It's not a visible element, so any style that you give it will only be visible when it's inherited by it's children.
Guffa
2010-05-07 13:34:25
-1: **what** ? Then why is it that on http://jsfiddle.net/r8mA7/ you see a red border? And how did this get upvoted thrice?
ANeves
2010-05-07 14:20:58
+2
A:
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
ANeves
2010-05-07 14:39:15