【问题标题】：CSS Table StylingCSS 表格样式
【发布时间】：2010-09-22 00:27:10
【问题描述】：

我需要将表格设置为圆角。

我只是在寻找最好的方法：

通常，当我将 div 设置为圆角时，我会使用 2 个顶部和底部带有空 cmets 的 div，并对它们应用大小调整和背景图像 CSS。

然而，表格有内部边框，所以我必须仔细对齐角落 bg 图像中的垂直线，以匹配真正的单元格边框。

这样清楚吗远吗？

所以我想知道其他人会如何处理这个问题。我认为我能做的最好的事情就是只使用一个完整的固定大小的背景图像、边框和所有内容，并在顶部覆盖一个无边框的表格。毕竟表格总是一样的大小。

谁能想到更好的方法？

【问题讨论】：

@Nathan 这不是针对您的。每当有人（非技术性阅读）谈论圆角时，我都会畏缩。圆角如何增强网页的可用性/功能性？
@Doug Chamberlain - 这不是我的问题，我只是给它加了一个标签。我同意，基本上；我的投票是通过 CSS3 为支持它的浏览器做圆角并让其他人看到方角；否则，对于这么小的收益来说，加价和麻烦太多了。但话说回来，我不是视觉设计专家。
您的图片链接已失效，使问题不清楚。
是的，自 2008 年以来我已经睡过几次床了：-/

标签： html css rounded-corners css-tables

【解决方案1】：

你最好制作一个只有角而不是边框的背景图像。对左上角、右上角、左下角和右下角单元格应用一个类，以定义应使用角背景图像。

并使用 css 设置边框样式。不要将它们放在背景图片中。

在您的方法中，您最终会导致背景图像中的垂直线与实际表格单元格的边框不匹配。

【讨论】：

【解决方案2】：

你试过http://www.roundedcornr.com/吗？

【讨论】：

【解决方案3】：

~~更好的方法是使用 9 格，其中背景角和顶部、底部、左侧和右侧背景重复~~

您的表格在单元格 5 中

编辑

正如一些在 cmets 中发布的那样，您无法使用 9-grid 实现效果。你必须做一个 12 网格系统（由我现在组成 :)

Live demo

。

代码：

警告：它不漂亮，但有效

<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">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2 lastcolumn">&nbsp;</th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4">&nbsp;</th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US &amp; 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">&nbsp;</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">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11 lastcolumn">&nbsp;</td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

注意：SO 从代码中删除了一些不间断的空格。查看现场演示了解更多信息

享受吧！

【讨论】：

这对我来说很有意义。如果我使用的是 PHP，我会将上述内容放入两个可包含的文件中 - 一个以单元格 5 的结尾，另一个以单元格 5 的开头。所以你可以包括，插入内容，包括，而不是用这么多嵌套的表格标签使页面的代码混乱。
在这种情况下，如何将单元格内边框移到边缘？您的意思是，2、4、6 和 8 个单元格的数量与表格本身的单元格数量一样多，而单元格 5 不是保存嵌入式表格，而是保存表格数据？

【解决方案4】：

做这样的事情......

XHTML：（抱歉必须删除第一个'

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US &amp; 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 个图像，但这不应该花费太长时间。如果您想在右侧添加阴影并相应地更改其背景图像和宽度属性，您还需要在每行的最后一个单元格中添加一个类。

【讨论】：

你可以用一张图片来做到这一点。一个包含四个角的精灵：精灵右下角的左上角、精灵左下角的右上角等。使用 CSS 将背景定位在每个单元格中（带有负位置值）
不，没有阴影和边框。

【解决方案5】：

25 种方法来做到这一点......http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

其实方法太多了。

【讨论】：

【解决方案6】：

发挥您最初的想法，您可以为每个角落单元格添加一个类，从而有效地关闭它们各自的违规边界。然后，您可以在和

元素中使用全角背景图像来解决圆角问题。

其余单元格的边框可以打开，线条将正确排列。

剩下的唯一问题是如何处理该爆炸的阴影。这是一个不同的练习。

【讨论】：