我试图使用CSS border-radius属性制作一个圆角表。我使用的表格样式是这样的:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

问题来了。我还想设置border-collapse:collapse属性,当设置border-radius时,它不再起作用。是否有一种基于css的方式,我可以得到相同的效果边界崩溃:崩溃而不实际使用它?

似乎很大一部分问题是,将表格设置为圆角并不影响角td元素的角。如果表格都是一种颜色,这就不是问题,因为我可以让顶部和底部td角分别为第一行和最后一行圆角。但是,我使用了不同的背景色来区分标题和条纹,所以内部td元素也会显示它们的圆角。

用另一个圆角元素包围桌子是行不通的,因为桌子的方角“渗透进来”。

将边框宽度指定为0不会折叠表格。

在将cellspacing设置为零后,底部td角仍然是正方形。

这些表是用PHP生成的,所以我可以对每个外部th/tds应用不同的类,并分别设置每个角的样式。我宁愿不这样做,因为它不是很优雅,而且应用于多个表有点痛苦,所以请继续提出建议。

我希望不使用JavaScript。


当前回答

其他一些答案很好,但没有一个认为你使用了thead, tbody和tfoot。或者是两种情况的组合。当你应用它们时,你会得到一些不必要的四舍五入或边框。 因此,我尝试从@NullUserException调整css-only answer,这是我得到的:

table {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: darkgreen;
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
table tr td,
table tr th {
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: darkgreen;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
    border-right-width: 2px;
    border-right-style: none;
    border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
    border-bottom-width: 2px;
    border-bottom-style: none;
    border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0;
}

/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
}

/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
    border-bottom-right-radius: 5px;
}

/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
  border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
  border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
  border-top-style: none;
}

深绿色用来清楚地显示整个表格的边界是正确的。从本质上讲,无论你在哪里看到深绿色-是你样式表的边界。 这个代码基显示普通表和有头,体和脚的表。CSS与上面的相同,只是为th添加了样式重置。在写作的时候,你可以看到,它们都呈现相同的效果。

其他回答

我刚刚为这写了一套疯狂的CSS,似乎完美地工作:

table { border-collapse: separate; border-spacing: 0; width: 100%; } table td, table th { border-right: 1px solid #CCC; border-top: 1px solid #CCC; padding: 3px 5px; vertical-align: top; } table td:first-child, table th:first-child { border-left: 1px solid #CCC; } table tr:last-child td, table tr:last-child th { border-bottom: 1px solid #CCC; } table thead + tbody tr:first-child td { border-top: 0; } table thead td, table th { background: #EDEDED; } /* complicated rounded table corners! */ table thead:first-child tr:last-child td:first-child { border-bottom-left-radius: 0; } table thead:first-child tr:last-child td:last-child { border-bottom-right-radius: 0; } table thead + tbody tr:first-child td:first-child { border-top-left-radius: 0; } table thead + tbody tr:first-child td:last-child { border-top-right-radius: 0; } table tr:first-child td:first-child, table thead tr:first-child td:first-child { border-top-left-radius: 5px; } table tr:first-child td:last-child, table thead tr:first-child td:last-child { border-top-right-radius: 5px; } table tr:last-child td:first-child, table thead:last-child tr:last-child td:first-child { border-bottom-left-radius: 5px; } table tr:last-child td:last-child, table thead:last-child tr:last-child td:last-child { border-bottom-right-radius: 5px; } <table> <thead> <tr> <th> Table Head </th> </tr> </thead> <tbody> <tr> <td> Table Data </td> </tr> </tbody> </table>

/* end complicated rounded table corners !*/

如果你想要一个css解决方案(不需要在HTML中设置cellspacing=0),允许1px边界(你不能用border-spacing: 0解决方案),我更喜欢做以下事情:

为你的表格单元格(td和th)设置border-right和border-bottom 给第一行中的单元格一个border-top 给第一列中的单元格一个border-left 使用第一个子和最后一个子选择器,在四个角中为表单元格画出适当的角。

点击这里查看演示。

给定以下HTML:

SEE example below: table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; text-align: left; border-top: solid 1px #bbb; } /* top-left border-radius */ table tr:first-child th:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; } <div> <table> <tr> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> </table> </div>

我总是这样用Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

正如Ian所说,解决方案是将表嵌套在一个div中,并像这样设置:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

使用overflow:隐藏,方角不会溢出div。

据我所知,你能做到的唯一方法是修改所有的单元格,就像这样:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

然后在底部画出边界,然后再画回来

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child在ie6中无效,但如果你使用border-radius,我假设你不在乎。

编辑:

在查看示例页面后,似乎可以通过单元格间距和填充来解决这个问题。

您所看到的厚厚的灰色边框实际上是表格的背景(如果您将边框颜色更改为红色,就可以清楚地看到这一点)。如果你将cellspacing设置为0(或等价地:td, th {margin:0;})灰色的“边界”将消失。

编辑2:

只有一张桌子,我不知道该怎么做。如果将标题行更改为嵌套表,可能会得到想要的效果,但这需要更多的工作,而且不是动态的。