CSS 如何在我的桌子上有一个圆形边框和边框折叠：折叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8889567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I have a rounded border on my table and border-collapse: collapse?
提问by Samantha J T Star
I have the following:
我有以下几点：
<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;">
<THEAD>
<TR style="background-color: red;">
<TH>Weekday</TH>
<TH>Date</TH>
<TH>Manager</TH>
<TH>Qty</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Mon</TD>
<TD>09/11</TD>
<TD>Kelsey</TD>
<TD>639</TD>
</TR>
<TR>
<TD>Tue</TD>
<TD>09/12</TD>
<TD>Lindsey</TD>
<TD>596</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>09/17</TD>
<TD>Susan</TD>
<TD>272</TD>
</TR>
</TBODY>
</TABLE>
I would like to have rounded borders, no space between cells also have the top header area of my table a different color. But it doesn't seem to work.
我想要圆形边框，单元格之间没有空间也有我表格的顶部标题区域不同的颜色。但它似乎不起作用。
I created this fiddle. When I comment out border-collapse I get the rounded edges but spaces between cells. When it's in I get no border radius and no space between cells.
我创造了这个小提琴。当我注释掉 border-collapse 时，我会得到圆形边缘，但单元格之间有空格。当它进入时，我没有边界半径，也没有单元格之间的空间。
Update:
更新：
Here seems to be the perfect solution: Fiddle
这似乎是完美的解决方案：Fiddle
回答by SpoonNZ
Adding border-spacing:0instead of border-collapse:collapseon your table tag fixes it:
添加border-spacing:0而不是border-collapse:collapse在您的表格标签上修复它：
回答by vdbuilder
Here's an example using a wrapper div :
这是一个使用包装 div 的示例：
<div style="display: table;
padding: 2px;
border-radius: 5px;
border: 1px solid #999;">
<TABLE style="border-collapse: collapse;">
<THEAD>
<TR style="background-color: red;">
<TH>Weekday</TH>
<TH>Date</TH>
<TH>Manager</TH>
<TH>Qty</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Mon</TD>
<TD>09/11</TD>
<TD>Kelsey</TD>
<TD>639</TD>
</TR>
<TR>
<TD>Tue</TD>
<TD>09/12</TD>
<TD>Lindsey</TD>
<TD>596</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>09/17</TD>
<TD>Susan</TD>
<TD>272</TD>
</TR>
</TBODY>
</TABLE>
</div>
You can see it working here: jsFiddle
你可以看到它在这里工作： jsFiddle
Note: display:table;is not supported in IE7 and earlier. IE8 requires a: !DOCTYPEin the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.
注意：display:table;在 IE7 及更早版本中不支持。IE8 需要一个：!DOCTYPE在文档中。所有现代浏览器（包括 IE9）都支持它，所以它应该不是问题。
