Table rounded corner problems

Question

I have some problems skinning a rounded corner table.

Take a look at the image please:

And here goes the code:

<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/tl.png" width="8" height="8" border="0" alt="..." />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/t.png"  alt="..." height="8" width="100%" />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/tr.png" width="8" height="8" border="0" alt="..." />
    </td>
</tr>
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/l.png" width="8" alt="..." height="100%" border="0"/>
    </td>
    <td align="center" border="0" style="background: url(assets/images/lightRoundedCorners/c.png) repeat">
        ACTUAL CONTENT
        <p>1. Item 1</p>
        <p>1. Item 1</p>
        <p>1. Item 1</p>
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/r.png" width="8" alt="..." height="100%" border="0"/>
    </td>
</tr>
<tr>
    <td>
        <img src="assets/images/lightRoundedCorners/bl.png" width="8" height="8" border="0" alt="..." />
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/b.png"  alt="..." height="8" width="100%" border="0"/>
    </td>
    <td>
        <img src="assets/images/lightRoundedCorners/br.png" width="8" height="8" border="0" alt="..." />
    </td>
</tr>

Any suggestions?

Answer 1

One solution could be to use css only without images to achieve what you need. check the following:

css

table {
  -moz-border-radius: 6px; /* FF1+ */
  -webkit-border-radius: 6px; /* Saf3-4 */
  border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome */
  -moz-box-shadow: 0 0 6px #959595 inset;
  -webkit-box-shadow: 0px 0px 6px #959595 inset; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 6px #959595 inset; /* Opera 10.5, IE9 */
  border: 1px solid grey;
  color: #00769B;
  font-size: 1.1em;
  text-align: center;}

html

<table id="whitePanel" width="190px" cellpadding="0" cellspacing="0" border="0" >
   <tr>
     <td>ACTUAL CONTENT
       <p>1. Item 1</p>
       <p>1. Item 1</p>
       <p>1. Item 1</p>
     </td>
   </tr>
  </table>

Demo: http://jsbin.com/ebove4/3

Because internet explorer doesn't understand these css3 properties, you can use css3pie.

Answer 2

Try adding the following CSS style to your table...

#whitePanel {
   border-collapse:collapse;
}

Answer 3

I am going to scalp you for using tables for non tabular data,

For god's sake man it's 2011 use divs and css!

http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

Answer 4

Ok, here is the code I used to solve the problem, I hope it helps all of you!

This method does not use Javascript, only CSS and HTML.

Result:

I still have some problems with the right corners ( top and bottom ) I hope to fix it soon.

Assets: I'm sorry to put it like this but I don't have a development server right now.

b:

bl:

br:

c:

l:

r:

t:

tl:

tr:

Here is the HTML code ( DIVS ):

<div class="dialog">
            <div class="hd">
                <div class="c">
                </div>
            </div>
            <div class="bd">
                <div class="c">
                     <div class="s">

                     <!-- content area -->

                        <h3>a<b>developer</b>?</h3>
                        <a href="">public <b>API</b> here!</a>  


                    <!-- content area -->

                    </div>
                </div>
            </div>
            <div class="ft"><div class="c"></div></div>
        </div>    

And here the css code:

.dialog {
     width:200px;
     margin:10px 10px 0px 0px;
    }

    .dialog .hd .c,
    .dialog .ft .c {
     font-size:1px; /* ensure minimum height */
     height:8px;
    }

    .dialog .ft .c {
     height:8px;
    }

    .dialog .hd {
     background:transparent url(../assets/images/lightRoundedCorners/tl.png) no-repeat ;
    }

    .dialog .hd .c {
     background:transparent url(../assets/images/lightRoundedCorners/tr.png) no-repeat right 0px;
    }

    .dialog .bd {
     background:transparent url(../assets/images/lightRoundedCorners/l.png) repeat-y 0px 0px;
    }

    .dialog .bd .c {
     background:transparent url(../assets/images/lightRoundedCorners/r.png) repeat-y right 0px;
    }

    .dialog .bd .c .s {
     margin:0px 8px 0px 8px;
     background:transparent url(../assets/images/lightRoundedCorners/c.png) repeat 0px 0px;
     padding:1px;
     padding-left: 5px;
     padding-bottom: 10px;
    }

    .dialog .ft {
     background:transparent url(../assets/images/lightRoundedCorners/bl.png) no-repeat 0px 0px ;
    }

    .dialog .ft .c {
     background:transparent url(../assets/images/lightRoundedCorners/br.png) no-repeat right 0px;
    }

Hope it helps!