CSS for borders with rounded corners for tables

Topic

New Reply

I posted the following in a css newsgroup:
I have read a number of tutorials on rounded corners for tables and I also have The CSS Anthology by Rachel Ward published by Sitepoint. As I understand all I have read 1) tables cannot have rounded corners (except with images for the corners) but by putting the table in a container that has rounded corners the table appears to have rounded corners and 2) it seems the container must have a width set.

In a restricted access Web site I have a number of tables of different widths and heights to which I would like to add rounded corners and a border. My question is can CSS and/or corner images be used to create such a container that will adjust its size to the size of the table I place in it?

I received the following response:Try this for your corners that will expand to any size: http:// http://www.roundedcornr.com/ [/url]

The result of trying this method is at: http://www.mewalker.co.uk/membersarea%5B/url%5D where the vertical fit is as expected but horizontally the width hasn’t adjusted to the width of the table. Can anyone account for this behaviour please? Also HTML Tidy tells me that two empty divs have been trimmed and I don’t understand why they are present if they have no use!

Enlightenment would be very much appreciated. Equally an alternative way of achieving a border with rounded corners around a table would help.

Reply | Quote

Replies

Hi Malcolm

Try changing the CSS section

.roundedcornr_box_469779 {
	BACKGROUND: #cccccc;
	width: 380px;
}

...

}
.roundedcornr_content_469779 {
	MARGIN: 0px 15px;
	width: 350px;
}

It currently does not have a width, you can also further improve the look by changing the table with class .style1 to have a cell spacing=10,

Have a look at line 18 and 19

Reply | Quote

Dear Jerry,

Thank you for your response. The changes you propose depend upon specifying the width of the container or the width of the table plus the margins. I am seeking to have the width adjust automatically to the width of the table plus the margins. Then the dozens of tables I have in my site can have a border with rounded corners without me have to establish the width of each table. Each table would have the same css using an id to differentiate one from another.

Reply | Quote

Got you,OK,I’ll be frank I personally wouldn’t use a table then in this way. However if youhave got a website that has a load of tables already set up the I suggest that you set the table to be a fixed width of say 600px and then let the .roundedcornr_box_469779 be 630px.

You can use the CSS:

table {width: 600px;}

I am not a great lover of tables as they restrict you so much, whilst I was experimenting with this I had created a div class that acted as a container class that allowed me to set up the row data using the li and ul tag, it is much more controllable that way. Tables although useful for holding tabular data it should not really be used for using it to construct layout

Reply | Quote

[indent]

---

Got you,OK,I’ll be frank I personally wouldn’t use a table then in this way. However if you have got a website that has a load of tables already set up the I suggest that you set the table to be a fixed width of say 600px and then let the .roundedcornr_box_469779 be 630px.

---

[/indent]

Dear Jerry,

The site was started with FP 98 and has grown since then. This is a part of the site that records, mainly, competition results and as a means to an end at the time tables seemed appropriate. There are some 100 of these tables, two to each page and if any two of them are the same height and width I’d be pleasantly surprised.

So you would have used lists – I’ll have to think about that as a possibility. BTW I am not using tables for the layout of these pages.

Reply | Quote

I’ll take it all back, how about this:

From your page

.style1 {
	FONT-SIZE: x-small;
	BACKGROUND-IMAGE: url(oakveneeropt5012_6.jpg);
	COLOR: yellow;
	FONT-FAMILY: "Trebuchet MS";
	width: 100%;
	height: 100%;
}

and from the CSS file (using an arbitory 90% but adjust it yourself to see it work)

.roundedcornr_box_469779 {
	BACKGROUND: #cccccc;
	width: 90%;
	
}

Reply | Quote

[indent]

---

The result of trying this method is at: http://www.mewalker.co.uk/membersarea%5B/url%5D where the vertical fit is as expected but horizontally the width hasn’t adjusted to the width of the table. Can anyone account for this behaviour please? Also HTML Tidy tells me that two empty divs have been trimmed and I don’t understand why they are present if they have no use!

---

[/indent]
About: HTML Tidy’s comment: most rounded corner schemes use one or more empty

s to hold background images. This approach can be criticized for introducing non-meaningful HTML (sometimes called non-semantic layout) into a document, which violates the principle of separation of content, style, and behavior. But I digress.

With respect to the width of a

, it naturally takes up 100% of the horizontal space available. There is no universal CSS rule for “shrink to fit.” In Firefox, if you assign your outermost

the id outerbox then this rule would “shrink-wrap” the div to the table and center it:

#outerbox {
display:table;
margin:0 auto;
}

But that does not work in IE6 at all, and display:table does not appear to work in IE7.

Reply | Quote

Thank you for your erudite commentary; not only interesting but pertinent. How could the discrepancies between browsers have arisen and will they ever be resolved?

Reply | Quote