Rounded Corners on Table

HTML & CSS
1

How can I possibly round this table’s corners without the use of Javascript. I just want to use pure css. There will be 2 columns on the table.

<STYLE TYPE=“text/css”>
<!–
.tealtable, .tealtable TD, .tealtable TH
{
background-color:black;
color:white;
padding: 0px;
}

table.tealtable {
border: 10px solid #fff;
}
–>
</STYLE>

<table cellspacing=“0” cellpadding=“0” CLASS=“tealtable”>
<tr>
<td colspan=“7”></td>
</tr>
<tr>
<td></td>

2

Which is another way of saying the question was on making rounded corners, not adding a shadow effect.

3

http://www.dillerdesign.com/experiment/DD_roundies/

You could put the table in a div and give the div a border, to avoid messing with the table itself, which is currently not advised with this script.

Put the script in a conditional statement for IE, and use teh CSS3 given earleir for all other well-behaved browsers.

Note - script does not work properly for IE if you have set shadows on something as well.

4

Change out the image using the SAME BASIC technique.
http://battletech.hopto.org/html_tutorials/eightcorners/corners2/template.html

Some minor differences, but the only thing major changed is the image… Which uses just one image:

http://battletech.hopto.org/html_tutorials/eightcorners/corners2/eightCorners.png

while being endless dynamic height and dynamic width up to half the image width. (so… 1280)… you need wider, make the image wider.

683 bytes of extra CSS, one 962 byte image, and four lines of markup at 214 bytes per box… beats the tar out of any ‘scripted’ solution in my book - especially since you can do MORE than just round the corners applying any image effect you can draw… as evidenced by using it for shadows in the primary code explaining it.

ESPECIALLY since it works all the way back to IE 5.x without resorting to anything browser specific like VML or half-assed browser specific nonsense like -moz and -webkit. (or as I call it, lands sake if you are going to make CSS3 support… MAKE CSS3 support) and works with scripting disabled - and given the number of people grabbing scriptblocks like noscript these days…

Mind you, my page also linked to a scripted version:
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/template.html

That applies the wrapping div from the script using a class trigger. It too uses only one image per effect. The first three all using just this image: (515 bytes)
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/images/unified.png

the last one using just this image: (1.3k)
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/images/black_unified.gif

Hell of a lot more versatile than this border-radius nonsense… especially when even the crappy scripted version only uses 739 BYTES of javascript to apply it. (though I’ll admit most of that is from my sleazing out a shortcut by using innerhtml instead of the DISASTER the ‘by the specification’ approach with the DOM manipulation would be)

While you pointed at 17k of javascript to fake with VML something (CSS3 border-radius) that we aren’t even supposed to be using on production sites since the specification isn’t even out of draft? I don’t think so. After all, there’s a REASON in gecko and webkit they are still using the -moz and -webkit prefixes - since those TOO are supposed to mean “not ready for use on production sites”.

5

There, fixed.

CSS3 is not a real world deployable answer. The proper approach would be a double nested DIV and sandbag for sliding doors with images before and after the table, possibly also (greatly depending on the border style) with a wrapping div or two around the table for sliding doors on the Y axis - which would basically make it my eight corners under one roof technique requiring a single small sub-1k image. Would also hinge on the background and desired padding around the table and the background the element is going onto.

Though NYXX I question if that’s tabular data - or if you are even marking up the table properly since a ‘colspan=7’ element should probably be a CAPTION… I’d have to see the actual content you are plugging in to say the best approach for doing this, as some tiny snippet doesn’t tell us a whole lot of anything useful.

If it is tabular data, remember to build your table properly with CAPTION, TH, THEAD, TBODY, etc, etc… I mean even for a snippet your example is sending up warning flags for me with the colspan and unnecessary attributes. (here’s a tip, if doing cellpadding=0 cellspacing=0, and you have a perfectly good class - get rid of both and use border-collapse:collapse; in the CSS instead!)

6

<sigh />

7

Try changing the value of padding and see what happesn :slight_smile:

.

8

It did round. But I want my outer padding rounded if possible?

9

Try this:



.tealtable, 
.tealtable td, 
.tealtable th
{
  background-color:black;  color:white; 
  padding: 0px; border:0;
  -webkit-border-radius: 42px; 
  -moz-border-radius: 16px; border-radius: 42px;
  -webkit-box-shadow:0px 0px 0px #ffee99;
}

Did you Google for CSS round corners?

The above is CSS3 I believe and works with most browsers.

Also note:

[INDENT][LIST]
[]lowercase is preferred for all CSS elements
[]these CSS remarks <!-- –> do not work.
[]use / */ to make hidden remarks
[/LIST]
[/INDENT]

.

10

Because a 17k javascript to avoid using a sub-1k image file, four lines of markup and ten lines of CSS is SO worth someone’s time.