Web Analytics Made Easy -
StatCounter Table with first row bordered? - CodingForum


No announcement yet.

Table with first row bordered?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Table with first row bordered?

    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 :-)



  • #2
    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.


    • #3
      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).


      • #4
        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 :-)