我试图使用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。
据我所知，你能做到的唯一方法是修改所有的单元格，就像这样:
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:
只有一张桌子，我不知道该怎么做。如果将标题行更改为嵌套表，可能会得到想要的效果，但这需要更多的工作，而且不是动态的。
我想明白了。你只需要使用一些特殊的选择器。
圆角的问题是，td元素并没有变成圆角。你可以这样解决这个问题:
表tr:最后一个孩子td:第一个孩子{
边框:2px纯橙色;
border-bottom-left-radius: 10 px;
｝
表tr:最后一个子td:最后一个子{
边框:2px纯绿色;
border-bottom-right-radius: 10 px;
｝
<表>
tbody > <
< tr >
< td > 1道明> < /
2 < td > < / td >
< / tr >
< tr >
< td > 3 < / td >
4 < td > < / td >
< / tr >
tbody > < /
表> < /
现在所有东西都四舍五入了，除了边界崩溃的问题:崩溃破坏了所有东西。
一个解决方法是添加border-spacing: 0，并在表中保留默认的border-collapse: separate。
如果你想要一个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中有一个宏来做这件事，它完全支持外部和内部边界，实现了与border-collapse相同的样式:在没有实际指定的情况下崩溃。
在FF/IE8/Safari/Chrome测试。
在所有浏览器中提供漂亮的纯CSS圆形边界，但IE8(优雅地退化)，因为IE8不支持边界半径:(
一些较老的浏览器可能需要供应商前缀来使用border-radius，因此可以根据需要将这些前缀添加到代码中。
这个答案不是最短的，但很管用。
.roundedTable {
border-radius: 20px / 20px;
border: 1px solid #333333;
border-spacing: 0px;
}
.roundedTable th {
padding: 4px;
background: #ffcc11;
border-left: 1px solid #333333;
}
.roundedTable th:first-child {
border-left: none;
border-top-left-radius: 20px;
}
.roundedTable th:last-child {
border-top-right-radius: 20px;
}
.roundedTable tr td {
border: 1px solid #333333;
border-right: none;
border-bottom: none;
padding: 4px;
}
.roundedTable tr td:first-child {
border-left: none;
}
要应用此样式，只需更改您的
<table>
标签如下:
<table class="roundedTable">
并确保在你的HTML中包含上述CSS样式。
希望这能有所帮助。
我尝试使用伪元素:before和:after在thead th:first-child和thead th:last-child上
结合使用<div class="radius borderCCC">包装表
table thead th:first-child:before{
content:" ";
position:absolute;
top:-1px;
left:-1px;
width:15px;
height:15px;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{
content:" ";
position:absolute;
top:-1px;
right:-1px;
width:15px;
height:15px;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:0px 5px 0px 0px;
}
见 jsFiddle
适用于我的chrome(13.0.782.215)让我知道这是否适用于其他浏览器。
下面是一个来自http://medialoot.com/preview/css-ui-kit/demo.html的关于如何实现圆角表的最新示例。它基于Joel Potter上面建议的特殊选择器。正如你所看到的，它还包括一些让IE有点开心的魔法。它包括一些额外的样式来交替行的颜色:
table-wrapper {
width: 460px;
background: #E0E0E0;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
padding: 8px;
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-webkit-border-radius: 10px;
/*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
-o-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.table-wrapper table {
width: 460px;
}
.table-header {
height: 35px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 34px;
text-decoration: none;
font-weight: bold;
}
.table-row td {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #858585;
padding: 10px;
border-left: 1px solid #ccc;
-khtml-box-shadow: 0px 1px 0px #B2B3B5;
-webkit-box-shadow: 0px 1px 0px #B2B3B5;
-moz-box-shadow: 0px 1px 0px #ddd;
-o-box-shadow: 0px 1px 0px #B2B3B5;
box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
border-left: 1px solid #ccc;
}
tr th:first-child {
-khtml-border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-o-border-top-left-radius: 8px;
/*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
border-top-left-radius: 8px;
border: none;
}
tr td:first-child {
border: none;
}
tr th:last-child {
-khtml-border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
-o-border-top-right-radius: 8px;
/*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
border-top-right-radius: 8px;
}
tr {
background: #fff;
}
tr:nth-child(odd) {
background: #F3F3F3;
}
tr:nth-child(even) {
background: #fff;
}
tr:last-child td:first-child {
-khtml-border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-o-border-bottom-left-radius: 8px;
/*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
-khtml-border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-o-border-bottom-right-radius: 8px;
/*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-right-radius: 8px;
}
对于一个有边框和可滚动的表，使用这个(replace variables， $ starting texts)
如果使用thead, tfoot或th，只需用它们替换tr:first-child和tr-last-child和td。
#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }
HTML:
<div id=table-wrap>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
我刚刚为这写了一套疯狂的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 !*/
到目前为止，最好的解决方案来自你自己的解决方案，它是这样的:
table, tr, td, th{
border: 1px solid;
text-align: center;
}
table{
border-spacing: 0;
width: 100%;
display: table;
}
table tr:last-child td:first-child, tr:last-child, table {
border-bottom-left-radius: 25px;
}
table tr:last-child td:last-child, tr:last-child, table {
border-bottom-right-radius: 25px;
}
table tr:first-child th:first-child, tr:first-child, table {
border-top-left-radius: 25px;
}
table tr:first-child th:last-child, tr:first-child, table {
border-top-right-radius: 25px;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>
其他一些答案很好，但没有一个认为你使用了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添加了样式重置。在写作的时候，你可以看到，它们都呈现相同的效果。
我看到了很多奇怪的黑客和变通办法，所以我想建议我的解决方案，创建一个表与边界半径和相同的视觉效果的边界:崩溃;通过简单地锁定嵌套的行和单元格来关闭边框。
你可以更深入地使用其他伪选择器来满足你的需求，比如first-child，等等，但这是最小的解决方案:
table {
width: 100%;
border-spacing: 0;
border-radius: 4px;
border: 1px solid #ccc;
}
th, td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
th:last-child, td:last-child {
border-right: none;
}
tr:last-child td {
border-bottom: none;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
