我需要将表格设计成圆角。
我只是在考虑如何最好地解决它：
通常情况下，当我为div设置圆角时，我会在顶部和底部使用2个带有空注释的div，并应用尺寸和尺寸。背景图片CSS给他们。
然而，该表具有内部边框，因此我必须仔细对齐角落bg图像中的垂直线，以匹配真实的单元格边框。
这是否清楚如此 多远？
所以我想知道其他人会如何处理这个问题。我认为我能做的最好的事情就是只使用一个完整的固定尺寸背景图像，边框和所有图像，并在顶部覆盖无边框表格。毕竟，这个表总是大小相同。
有人能想到更好的方法吗？
答案 0 :(得分：4)
25种方法.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
实际上，有太多方法可以做到。
答案 1 :(得分：3)
您最好只使用角落而不是边框制作背景图像。 将类应用于左上角，右上角，左下角和右下角单元格，以定义应使用角落背景图像。
用css设置边框样式。不要将它们放在背景图像中。
在你的方法中，你总是会让背景图像中的垂直线与实际表格单元格的边界不匹配。
答案 2 :(得分：2)
您是否尝试过http://www.roundedcornr.com/？
答案 3 :(得分：1)
更好的方法是9格，你有背景角，顶部，底部，左右背景重复
你的表进入单元格5
正如一些人在评论中发表的那样，用9格无法达到效果。 你必须做一个12网格系统（由我现在组成:)
。
警告：它不漂亮，但有效
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
注意：代码中有一些不间断的空格。查看生活演示了解更多信息
享受！
答案 4 :(得分：1)
做这样的事......
XHTML :(抱歉必须删除第一个'＆lt;'，因为它不会让我正常发布，修复这个杰夫！）
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS： ＃价钱 { 字体重量：粗体; 文本对齐：中心 }
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
唯一的缺点是您必须创建4个图像，但这不应该花费太长时间。如果要在右侧添加该阴影，只需相应地更改它的background-image和width属性，您还需要在每行的最后一个单元格中添加一个类。
答案 5 :(得分：1)
根据您原来的想法，您可以为每个角落单元添加一个类，从而有效地关闭各自的违规边框。然后，您可以在＆lt; thead＆gt;中使用全角背景图像。和＆lt; tfoot＆gt;要考虑圆角的元素。
其他单元格的边框可以打开，线条也会正确排列。
唯一剩下的问题是应对爆破的阴影。这是一个不同的练习。