CSS3 的 border-radius 属性和 border-collapse:collapse 不能混合。如何使用边框半径创建带有圆角的折叠表格?
-
06-07-2019 - |
题
编辑 - 原标题: 有没有其他方法可以实现 border-collapse:collapse
在 CSS
(为了有一个折叠的圆角桌子)?
由于事实证明,简单地折叠表格边框并不能解决根本问题,因此我更新了标题以更好地反映讨论。
我正在尝试制作一张圆角的桌子 使用 CSS3
border-radius
财产。我使用的表格样式看起来像这样:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
问题就在这里。我也想设置 border-collapse:collapse
属性,以及何时设置 border-radius
不再有效。有没有一种基于 CSS 的方法可以获得与 border-collapse:collapse
没有实际使用它?
编辑:
我制作了一个简单的页面来演示该问题 这里 (仅限 Firefox/Safari)。
看来很大一部分问题是把桌子设置成圆角并不会影响墙角的角 td
元素。如果桌子都是一种颜色,这不会是问题,因为我可以只制作顶部和底部 td
第一行和最后一行的角分别为圆角。但是,我对表格使用不同的背景颜色来区分标题和条纹,因此内部 td
元素也会显示它们的圆角。
建议解决方案摘要:
用另一个带圆角的元素包围桌子是行不通的,因为桌子的方角会“渗透”。
将边框宽度指定为 0 不会折叠表格。
底部 td
将单元格间距设置为零后,角仍然是方形的。
使用 JavaScript 来代替——可以避免这个问题。
可能的解决方案:
这些表是用 PHP 生成的,因此我可以对每个外部 th/tds 应用不同的类,并分别设置每个角的样式。我不想这样做,因为它不是很优雅,而且应用于多个表有点痛苦,所以请继续提出建议。
可能的解决方案 2 是使用 JavaScript(特别是 jQuery)来设置角的样式。这个解决方案也有效,但仍然不完全是我想要的(我知道我很挑剔)。我有两个保留:
- 这是一个非常轻量级的网站,我希望将 JavaScript 保持在最低限度
- 使用 border-radius 对我来说的吸引力之一是优雅的降级和渐进的增强。通过对所有圆角使用 border-radius,我希望在支持 CSS3 的浏览器中拥有一致的圆形网站,并在其他浏览器中拥有一致的方形网站(我正在看着你,IE)。
我知道今天尝试使用 CSS3 来做到这一点似乎没有必要,但我有我的理由。我还想指出,这个问题是 w3c 规范的结果,而不是 CSS3 支持不佳的结果,因此当 CSS3 得到更广泛的支持时,任何解决方案仍然是相关和有用的。
解决方案
我明白了。你只需要使用一些特殊的选择器。
圆角的问题是td元素也没有变圆。您可以通过执行以下操作来解决此问题:
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
现在一切顺利,除了仍然存在border-collapse: collapse
打破一切的问题。解决方法是在html中设置cellspacing="0"
(谢谢, Joel )。
其他提示
以下方法适用于(在Chrome中进行测试),使用box-shadow
,传播1px
而不是<!>“真实<!>”;边界。
table {
border-collapse: collapse;
border-radius: 30px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #666; /* this draws the table border */
}
td {
border: 1px solid #ccc;
}
如果你想要一个仅 CSS 的解决方案(无需设置 cellspacing=0
在 HTML 中)允许 1px 边框(你不能用 border-spacing: 0
解决方案),我更喜欢执行以下操作:
- 设置一个
border-right
和border-bottom
对于您的表格单元格(td
和th
) - 给定单元格中的 第一排 A
border-top
- 给定单元格中的 第一栏 A
border-left
- 使用
first-child
和last-child
选择器,将四个角中的表格单元格的相应角圆化。
给定以下 HTML:
请参见下面的示例:
.custom-table{margin:30px;}
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 th:last-child{
border-top:solid 1px #bbb;}
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;
}
table.Info tr th,
table.Info tr:first-child td
{
border-top: 1px solid #bbb;
}
/* top-left border-radius */
table tr:first-child th:first-child,
table.Info tr:first-child td:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child,
table.Info tr:first-child td: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 class="custom-table">
<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>
您是否尝试过使用table{border-spacing: 0}
代替table{border-collapse: collapse}
???
你可能不得不在桌子周围放置另一个元素并用圆角边框设置样式。
工作草案指定border-radius
不适用于表格元素border-collapse
的值是collapse
。
正如Ian所说,解决方案是将表嵌套在div中并将其设置为:
.table_wrapper {
border-radius: 5px;
overflow: hidden;
}
使用overflow:hidden
,方角不会渗透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设置为零(或等效地:td, th { margin:0; }
),则灰色<!> quot; borders <!> quot;将消失。
编辑2:
我只能用一张表找不到办法。如果您将标题行更改为嵌套表,您可能可以获得所需的效果,但它会更有效,而不是动态。
我尝试使用: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)请告诉我这是否适用于其他浏览器。
我遇到了同样的问题。
完全删除border-collapse
并使用:
cellspacing="0" cellpadding="0"
在html文档中。
例如:
<table class="top_container" align="center" cellspacing="0" cellpadding="0">
实际上,您可以在table
中添加div
作为其包装器。然后将这些CSS
代码分配给包装器:
.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}
table {
border-collapse: collapse;
}
只有在桌子周围没有边框时,给定的答案才有效,这是非常有限的!
我在SASS中有一个宏来完成这项工作,它完全支持外部和内部边框,实现与边框折叠相同的样式:折叠而不实际指定它。
在FF / IE8 / Safari / Chrome中测试。
在所有浏览器中为纯CSS提供漂亮的圆形边框,但IE8(优雅地降级)因为IE8不支持border-radius :(
某些旧浏览器可能需要供应商前缀才能与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样式。
希望这有帮助。
对于带边框和可滚动的表,请使用此(替换变量,$
起始文本)
如果您使用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;
}
/* end complicated rounded table corners !*/
带边框折叠的解决方案:表和显示分开:tbody和thead的内联表。
table {
width: 100%;
border-collapse: separate;
border-spacing: 0px;
background: transparent;
}
table thead {
display: inline-table;
width: 100%;
background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-radius: 7px 7px 0px 0px;
padding: 1px;
padding-bottom: 0;
}
table tbody {
border: 1px solid #ddd;
display: inline-table;
width: 100%;
border-top: none;
}
我是HTML和CSS的新手,我也在寻找解决方案,就像我找到的那样。
table,th,td {
border: 1px solid black;
border-spacing: 0
}
/* add border-radius to table only*/
table {
border-radius: 25px
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
border-radius: 0 0 25px 0
}
我试一试,猜猜它的作用:)
遇到同样的问题后找到了这个答案,但发现它很简单:只需给表溢出:隐藏
不需要包装元素。当然,我不知道7年前这个问题最初会被问到是否会有效,但现在可以使用了。
带圆角和带边框的桌子。 使用 @Ramon Tayag 解决方案。
关键是要指出 border-spacing: 0
。
使用 SCSS 的解决方案。
$line: 1px solid #979797;
$radius: 5px;
table {
border: $line;
border-radius: $radius;
border-spacing: 0;
th,
tr:not(:last-child) td {
border-bottom: $line;
}
th:not(:last-child),
td:not(:last-child) {
border-right: $line;
}
}
我开始尝试使用<!>“display <!>”;我发现:border-radius
,border
,margin
,padding
,在table
中显示:
display: inline-table;
例如
table tbody tr {
display: inline-table;
width: 960px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
但我们需要设置每列的width
tr td.first-column {
width: 100px;
}
tr td.second-column {
width: 860px;
}
以下是中有关如何实现带圆角的表格的最新示例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;
}
我总是这样使用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;
}
}
}
现在正式支持Border-radius。因此,在上述所有示例中,您可以删除<!> quot; -moz - <!>;前缀。
另一个技巧是使用与边框相同的颜色作为顶部和底部行。所有3种颜色相同,它融合在一起,看起来像一个完美的圆桌,即使它不是物理的。