Html CSS3 的 border-radius 属性和 border-collapse:collapse 不能混用。如何使用 border-radius 创建带圆角的折叠表格？

Question

提问by vamin

Edit - Original Title:Is there an alternative way to achieve border-collapse:collapsein CSS(in order to have a collapsed, rounded corner table)?

编辑-原标题：是否有其他方式来实现border-collapse:collapse的CSS（为了有倒塌，圆角表）？

Since it turns out that simply getting the table's borders to collapse does not solve the root problem, I have updated the title to better reflect the discussion.

由于事实证明简单地让表格的边框折叠并不能解决根本问题，因此我更新了标题以更好地反映讨论。

I am trying to make a table with rounded cornersusing the CSS3border-radiusproperty. The table styles I'm using look something like this:

我正在尝试使用该CSS3border-radius属性制作带有圆角的表格。我使用的表格样式如下所示：

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

Here's the problem. I also want to set the border-collapse:collapseproperty, and when that is set border-radiusno longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapsewithout actually using it?

这就是问题所在。我也想设置border-collapse:collapse属性，当设置border-radius不再有效时。有没有一种基于 CSS 的方法可以获得与border-collapse:collapse不实际使用它相同的效果？

Edits:

编辑：

I've made a simple page to demonstrate the problem here(Firefox/Safari only).

我制作了一个简单的页面来演示这里的问题（仅限 Firefox/Safari）。

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner tdelements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom tdcorners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner tdelements would show their rounded corners as well.

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

Summary of proposed solutions:

建议的解决方案摘要：

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."

用另一个带圆角的元素围绕桌子是行不通的，因为桌子的方角会“渗出”。

Specifying border width to 0 doesn't collapse the table.

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

Bottom tdcorners still square after setting cellspacing to zero.

底部td四角设置CELLSPACING零后仍然广场。

Using JavaScript instead- works by avoiding the problem.

使用 JavaScript 可以避免这个问题。

Possible solutions:

可能的解决方案：

The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.

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

Possible solution 2 is to use JavaScript (jQuery, specifically) to style the corners. This solution also works, but still not quite what I'm looking for (I know I'm picky). I have two reservations:

可能的解决方案 2 是使用 JavaScript（特别是 jQuery）来设置角的样式。这个解决方案也有效，但仍然不是我想要的（我知道我很挑剔）。我有两个保留意见：

this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum
part of the appeal that using border-radius has for me is graceful degradation and progressive enhancement. By using border-radius for all rounded corners, I hope to have a consistently rounded site in CSS3-capable browsers and a consistently square site in others (I'm looking at you, IE).

这是一个非常轻量级的网站，我想将 JavaScript 保持在最低限度
使用 border-radius 对我来说的部分吸引力在于优雅的降级和渐进式增强。通过对所有圆角使用 border-radius，我希望在支持 CSS3 的浏览器中拥有一个始终圆润的站点，而在其他浏览器中拥有一个始终如一的方形站点（我在看着你，IE）。

I know that trying to do this with CSS3 today may seem needless, but I have my reasons. I would also like to point out that this problem is a result of the w3c specification, not poor CSS3 support, so any solution will still be relevant and useful when CSS3 has more widespread support.

我知道今天尝试用 CSS3 做到这一点似乎没有必要，但我有我的理由。我还要指出，这个问题是 w3c 规范的结果，而不是糟糕的 CSS3 支持，所以当 CSS3 得到更广泛的支持时，任何解决方案仍然是相关和有用的。

Answer 1

采纳答案by vamin

I figured it out. You just have to use some special selectors.

我想到了。你只需要使用一些特殊的选择器。

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

圆角表格的问题是 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;
}

Now everything rounds properly, except that there's still the issue of border-collapse: collapsebreaking everything.

现在一切正常，除了仍然存在border-collapse: collapse破坏一切的问题。

A workaround is to add border-spacing: 0and leave the default border-collapse: separateon the table.

解决方法是在表中添加border-spacing: 0并保留默认值border-collapse: separate。

Answer 2

回答by cmrd.Kaash

The following method works (tested in Chrome) by using a box-shadowwith a spread of 1pxinstead of a "real" border.

以下方法通过使用box-shadow带有扩展的1px代替“真实”边框来工作（在 Chrome 中测试）。

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;
}

Answer 3

回答by vxsx

If you want a CSS-only solution (no need to set cellspacing=0in the HTML) that allows for 1px borders (which you can't do with the border-spacing: 0solution), I prefer to do the following:

如果您想要一个仅cellspacing=0允许 1px 边框的 CSS 解决方案（无需在 HTML 中设置）（您无法使用该border-spacing: 0解决方案实现），我更喜欢执行以下操作：

Set a border-rightand border-bottomfor your table cells (tdand th)
Give the cells in the first rowa border-top
Give the cells in the first columna border-left
Using the first-childand last-childselectors, round the appropriate corners for the table cells in the four corners.

为您的表格单元格（和）设置一个border-right和border-bottomtdth
给第一行的单元格一个border-top
给第一列中的单元格一个border-left
使用first-child和last-child选择器，为四个角中的表格单元格修圆适当的角。

See a demo here.

在此处查看演示。

Given the following HTML:

鉴于以下 HTML：

SEE example below:

见下面的例子：

   

 .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>

Answer 4

回答by Cesar

Have you tried using table{border-spacing: 0}instead of table{border-collapse: collapse}???

你有没有试过用table{border-spacing: 0}代替table{border-collapse: collapse}？？？

Answer 5

回答by user59200

You'll probably have to put another element around the table and style that with a rounded border.

您可能需要在表格周围放置另一个元素并为其设置圆角边框。

The working draftspecifies that border-radiusdoes not apply to table elements when the value of border-collapseis collapse.

该工作草案指定是border-radius不适用于表格元素时的值border-collapse是collapse。

Answer 6

回答by Chris

As Ian said, the solution is to nest the table inside a div and set it like that:

正如伊恩所说，解决方案是将表嵌套在一个 div 中并设置如下：

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

With overflow:hidden, the square corners won't bleed through the div.

使用overflow:hidden，方角不会渗入 div。

Answer 7

回答by Joel

To the best of my knowledge, the only way you could do it would be to modify all the cells like so:

据我所知，你唯一能做的就是像这样修改所有的单元格：

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

And then to get the border on the bottom and right back

然后得到底部和右侧的边框

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

:last-childis not valid in ie6, but if you are using border-radiusI assume you don't care.

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

EDIT:

编辑：

After looking at your example page, it appears that you may be able to work around this with cell spacing and padding.

查看示例页面后，您似乎可以通过单元格间距和填充来解决此问题。

The thick gray borders you are seeing are actually the background of the table (you can see this clearly if you change the border color to red). If you set the cellspacing to zero (or equivalently: td, th { margin:0; }) the grey "borders" will disappear.

您看到的粗灰色边框实际上是表格的背景（如果将边框颜色更改为红色，您可以清楚地看到这一点）。如果您将单元格间距设置为零（或等效地：），td, th { margin:0; }灰色“边框”将消失。

EDIT 2:

编辑2：

I can't find a way to do this with only one table. If you change your header row to a nested table, you might possibly be able to get the effect you want, but it'll be more work, and not dynamic.

我找不到只用一张桌子来做到这一点的方法。如果您将标题行更改为嵌套表，您可能能够获得您想要的效果，但它会更有效，而不是动态的。

Answer 8

回答by adardesign

I tried a workaround using the pseudo elements :beforeand :afteron the thead th:first-childand thead th:last-child

我尝试了解决方法使用伪元素:before，并:after在thead th:first-child与thead th:last-child

In combination with wrapping the table with a <div class="radius borderCCC">

结合用一个包裹桌子 <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;
}

see jsFiddle

见jsFiddle

Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.

在 chrome (13.0.782.215) 中适用于我，请告诉我这在其他浏览器中是否适用于您。

Answer 9

回答by AmerllicA

Actually you can add your tableinside a divas its wrapper. and then assign these CSScodes to wrapper:

实际上你可以添加你的tableinsidediv作为它的包装器。然后将这些CSS代码分配给包装器：

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Answer 10

回答by brauliobo

For a bordered and scrollable table, use this (replace variables, $starting texts)

对于有边框和可滚动的表格，使用这个（替换变量，$起始文本）

If you use thead, tfootor th, just replace tr:first-childand tr-last-childand tdwith them.

如果您使用thead, tfootor th，只需将tr:first-childandtr-last-child和 and替换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:

HTML：

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Html CSS3 的 border-radius 属性和 border-collapse:collapse 不能混用。如何使用 border-radius 创建带圆角的折叠表格？

提问by vamin

采纳答案by vamin

回答by cmrd.Kaash

回答by vxsx

回答by Cesar

回答by user59200

回答by Chris

回答by Joel

回答by adardesign

回答by AmerllicA

回答by brauliobo

相关推荐

最近更新

标签

Html CSS3 的 border-radius 属性和 border-collapse:collapse 不能混用。如何使用 border-radius 创建带圆角的折叠表格？

提问by vamin

采纳答案by vamin

回答by cmrd.Kaash

回答by vxsx

回答by Cesar

回答by user59200

回答by Chris

回答by Joel

回答by adardesign

回答by AmerllicA

回答by brauliobo

相关推荐

Html 如何在 CSS 中引用带有空格的长类名？

Html <div> 图层在 PDF 之上

Html 是否允许在链接内嵌套链接？

如何设置 HTML 框架的背景颜色？

相关推荐

最近更新

标签