Html 表格圆角问题

我在为圆角桌子剥皮时遇到一些问题

请看一下图片：

下面是代码：

<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>

实际内容
一,。项目1

一,。项目1

一,。项目1

---

有什么建议吗？

尝试将以下CSS样式添加到表中

#whitePanel {
   border-collapse:collapse;
}

---

一种解决方案是只使用css而不使用图像来实现所需的功能。检查以下各项：

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>

实际内容
一,。项目1

一,。项目1

一,。项目1

演示：

---

因为internet explorer不了解这些css3属性，所以您可以使用。

我将对您使用非表格数据的表格进行揭发

看在上帝的份上，伙计，现在是2011年使用div和css

---

好的，这是我用来解决这个问题的代码，我希望它能帮助你们所有人

此方法不使用Javascript，只使用CSS和HTML

结果:

我仍然有一些右上角和右下角的问题，我希望能尽快解决

资产： 很抱歉这样说，但我现在没有开发服务器

b:

基本法：

比尔：

c:

l:

r:

t:

tl:

tr:

以下是HTML代码（DIVS）：

---

希望有帮助

避免使用

cellpadding=“0”cellspacing=“0”border=“0”

@Xavi，然后在或创建一个带有图像的实时示例，看看我们如何使其工作：）我用代码和图像（无javascript）回答了这个问题，这很有帮助@Xavi只需将图片上传到某个地方，就可以在我为您编写的上述网站中看到一个实例，而不仅仅是代码。@添加到可能的解决方案中（很抱歉这样说，但我现在没有一个稳定的服务器来维护zip）

<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>    

.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;
    }