表圆角问题

Question

我在圆角桌上涂上了一些问题。

请看一下图片：

这里是代码：

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

有什么建议吗？

Answer 1

我打算将你的表格用于非表格数据，

为了上帝的缘故，人们在2011年使用divs和css！

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

Answer 2

一种解决方案可能是仅使用没有图像的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>

演示： http://jsbin.com/ebove4/3

由于Internet Explorer无法理解这些css3属性，因此您可以使用css3pie。

Answer 3

尝试将以下CSS样式添加到您的表格中...

#whitePanel {
   border-collapse:collapse;
}

Answer 4

好的，这是我用来解决问题的代码，希望对大家有所帮助！

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

结果：

右角（顶部和底部）仍有问题我希望尽快解决。

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

b：

bl：

br：

c：

l：

r：

t：

tl：

tr：

这是HTML代码（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>    

这里是css代码：

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

希望它有所帮助！