source.mihelac.org

Rounded Corners Table Rows

Rounded corners with CSS are a hot topic in web design for some time and there are many articles showing how to implement them with or without javascript, using one 1, 2, 4 or without images at all. I was inconveniently surprised when I needed to create table with rounded rows effect. It seems there is no simple solution for that and I didn’t wanted to use floated DIV’s instead of table cells because that would cut down flexibility of tables.

First idea was to fill table rows with solid colour and to use bottom positioned background image that would divide two rows and draw rounded corners. That would be easy, but does not work because when background-image is applied to table row it starts afresh in every cell on Internet Explorer and Opera browsers. The other problem with applying background-image to table rows could appear if table has flexible width, what was not in my case.

So, I decided to break background image into three images: for first cell in row, for last cell in row, and for every other cell. Images for first and last cell should be big at least as possible width of these cells. So we now have these images:

background image for first column in row

background image for last column in row

background image for all other cells

And our CSS is:

.rrTable {
  border-collapse:collapse;
  width:50%;
}
.rrTable td, .rrTable th {
  margin:0;
  padding:0px 5px 17px 5px; /* bottom padding is equal to size of bck image*/
}
.rrTable td, .rrTable th {
  background:#E3E7D8 url(tr1.gif) left bottom repeat-x;
}
.rrTable td.f, .rrTable th.f {
  background:#E3E7D8 url(tr1f.gif) left bottom no-repeat;
}
.rrTable td.l, .rrTable th.l {
  background:#E3E7D8 url(tr1l.gif) right bottom no-repeat;
}

It will be easier to use :first-child and :last-child pseudo selectors from CSS3 specification when they get better support in browsers (Firefox 1.5 support both of them, Opera only :first-child and IE on windows none).

Table is almost done, we need to round corners on first row and to cut surplus from the last row. I didn’t come with nothing better than to create new CSS classes and blank row above first row to “keep” it’s corners.

Take look at finished rounded rows table and enjoy yourself.

<pre> # code </pre>