View Full Version : Table with first row bordered?

10-03-2006, 11:36 PM
Hi there

COuld anybody advise me if this is possible. I would like to make a table that has first row bordered, but other rows not. I know it is possible using border in CSS and <th> and <tr> but the problem is then the first row is 2 pixels wider, because it has border and the others do not have border.

The only trick I find is to make border around other rows also same colour as background on the table, so the border is seen as a background on the missing 2 pixels (when using border 1px;). But since I have tables with many different backrounds it makes it impractical.

Is there any easier way to do it using tables and CSS? And yes, I do need tables, as I use tabelar data :-)



10-04-2006, 01:57 AM
use height???

I've never edited rows themselves, just cells. what I would do is make the tds in the first row so they fit your style.

say you have 10 cells in the first row:
1st td: border-left, border-top, border-bottom.
2nd-9th td: border-top, border-bottom.
10th td: border-right, border-top, border-bottom.

The rest of the cells, just set the height on them and make it 2 bigger than the rest.

Hard-coding, sure. works, sure.

10-04-2006, 02:56 AM
border-color: transparent is an option though that doesn't work in Internet Explorer 6.

What you really need is probably the border-box model where the border is considered part of the width of the box. To access it you either need to use the proposed CSS 3 box-sizing: border-box declaration (Opera), a proprietary declaration like -moz-box-sizing: border-box (Mozilla (Firefox)), or quirks mode (Internet Explorer).

10-04-2006, 09:33 AM
Yes, that is what I would need, that the border is part of the box. Problem is I am not very advanced and don't know how to do this.

I though of another not very good option. I make 2 tables, one for the first row and one for the rest :-) The second width is 100%-2px :-)