Hi,

I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing.

The HTML is:

<tr>
	<td width="12%" class="tbl-col cnr-tl">Col 1</td>
	<td width="20%" class="tbl-col">Col 2</td>
	<td width="20%" class="tbl-col">Col 3</td>
	<td width="30%" class="tbl-col">Col 4</td>
	<td width="12%" class="tbl-col cnr-tr">Col 5</td>
</tr>

and the css is:

.tbl-col {
	background-color			: #FFDA99;
	color						: #C00000;
	font-size					: 15px;
	font-style					: italic;
	font-weight					: bold;
	height						: 25px;
	text-align					: center;
}
.cnr-tl {
	border-top-left-radius				: 10px;
	-moz-border-radius-topleft			: 10px;
	-webkit-border-top-left-radius		: 10px;
}
.cnr-tr {
	border-top-right-radius				: 10px;
	-moz-border-radius-topright			: 10px;
	-webkit-border-top-right-radius		: 10px;
}

When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time.

Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners.

Does anyone know how to do this?

Debbie

    I'm not seeing the problem right now; I've copied what you've given into a page to play around with, and I'm not seeing any difference if I swap the CSS rules for .cnr-tl and .cnr-tr; the leftmost column and the rightmost column continue to have rounded corners no matter which order the rules appear in the stylesheet.

    One suggestion I can make is: assuming that these are for styling the top header row of a table (else why only round off the top corners?), consider using the <th> element instead of <td> for the header cells. It just adds that little extra bit of meaningfulness to the HTML (it allows you to style header cells differently from ordinary cells without needing extra classes, for example).

      Write a Reply...