Table with rounded upper corners

We want to round the left and right top corners of a HTML table. The left, right and bottom table borders should line up with the rounded corners. To achieve this goal, placing a background image in the leftmost and rightmost TH cells does not work because the left and right borders overwrite background images placed within table cells. Putting the borders on the tbody element does not work for IE 6/7 (we don't consider IE < 6).

Our approach uses a relatively positioned DIV wrapped around the table. The images containing the corners are absolutely positioned to the top left and top right corner of this DIV, in order to cover up a portion of the leftmost and rightmost TH cells including a portion of their borders.

As usual we have to work around browser bugs. So let's start with a table and a wrapping DIV.

1. Table with 1px red border, wrapped in a DIV with a 1px blue border

Beginning with a simple example

    .table-container-with-border {
      border:   1px solid blue;
      position: relative;
    }

    table.with-border {
      border:   1px solid red;
      width:    100%;
    }

Now let's add 'border-collapse:collapse'

2. After adding border-collapse: collapse, we get

In IE, it's all ok. But in FF, the top and left border of the surrounding DIV effectively "collapse", a behavior observed up to Firefox 2. So we will concentrate on FF for a while. Let's add our rounded corner image.

3. With an absolutely position left corner image

    #left-corner {
      position: absolute;
      left:     0px;
      top:      0px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

The table's top and left border impose themselves on top of the absolutely positioned rounded corner image corner-top-left.ico. To fix this FF bug, we add a one pixel left and top margin to the table.

4. After adding the table margins

The table's CSS is now:

    table#with-border-and-collapse-and-margins {
      border: 1px solid red;
      width: 100%;
      border-collapse:collapse;
      margin-left:1px; margin-top:1px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

That's ok. All that remains to be done now, is

• to remove the table containers border we inserted just for demonstration purposes
• to set the color of the left and top border of the first table cell to the background-color of TH elements

5. After doing the aforementioned modifications

    .table-container-with-border {
      position: relative;
    }

    th.correct-colors {
      border-left: 1px solid silver;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

Still concentratin on FF, we will now try to "round up" the top right corner

6. The right corner:

We just add the absolutely positioned right corner and correct the right border color of the rightmost TH cell:

    #right-corner {
      position: absolute;
      right:    0px;
      top:      0px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

Adding a 1px border-right does not resolve the problem we see. That's probably because of the the 100% width. Additionally adding 'table-layout:fixed', however, does the trick, for FF at least.
BTW, apparently two FF bugs compensate here. Add 'table-layout:fixed' to the second table and you see what I mean.

7. After adding table-layout:fixed and a 1px right margin to the table

    table#with-border-and-collapse-and-ltr-margins-and-layout {
      table-layout:fixed;
      border:      1px solid red;
      border-top:  none;
      width:       100%;
      border-collapse: collapse;
      margin-left:  1px;
      margin-top:   1px;
      margin-right: 1px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

And now for IE

8. Correcting for IE6

IE6's collapsing mechanism gives priority to the table's color, not to the table cell's color. So we have to work around that.

    table#with-border-and-collapse-and-ltr-margins-and-layout {
      table-layout:    fixed;
      border-bottom:   1px solid red;
      width:           100%;
      border-collapse: collapse;
      margin-left:     1px;
      margin-top:      1px;
      margin-right:    1px;
    }

    th.leftmost  { border: none; border-left:  1px solid silver }
    td.leftmost  { border: none; border-left:  1px solid red;   }
    th.rightmost { border: none; border-right: 1px solid silver }
    td.rightmost { border: none; border-right: 1px solid red;   }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

That's ok for IE6, but not for IE7 which continues to show the right border of the rightmost TH cell. So we tree another approach. Instead of giving the table a 1px right-margin, we push the image to the right by giving it a 'right' property of '-1px'. This also works for FF and IE6.

9. Using -1px margin-right on right corner image (to make IE7 happy also)

    table#with-border-and-collapse-and-ltr-margins-and-layout-for-ie7 {
      table-layout:    fixed;
      border-bottom:   1px solid red;
      width:           100%;
      border-collapse: collapse;
      margin-left:     1px;
      margin-top:      1px;
    }

    img#right-corner-ie7 {
      position:     absolute;
      top:          0px;
      right:        0px;
      margin-right:  -1px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date

Does this work in Safary?

10. Appendix: IE6 and IE7 do the right thing without all this hackery

In both IE6 and IE7 the straight approach works

    table#with-bottom-border-and-collapse {
      border-bottom:   1px solid red;
      width:           100%;
      border-collapse: collapse;
    }

    img#right-corner {
      position: absolute;
      right:    0px;
      top:      0px;
    }

ID	Title	Date	Status
1	Star Wars	00/00/0000	Unknown
2	Das Kapital	19th century	up to date