CSS 我可以制作带有圆角的表格线吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2198512/
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
Can I make a table line with rounded corners?
提问by Manu
I've been using HTML and CSS to style my resume, but I'm having difficulties styling a <tr> element.
我一直在使用 HTML 和 CSS 来设计我的简历，但是我在设计 <tr> 元素的样式时遇到了困难。
Does this not work inside a table ?
这在表内不起作用吗？
-moz-border-radius: 5x;
-webkit-border-radius: 5px;
回答by Tatu Ulmanen
Yes, it works inside a table on tdand thelements, but not on tr. You can also use it on tableto round the corners of the whole table.
是的，它可以在表td和th元素上工作，但不能在 上工作tr。您也可以使用它table来使整个桌子的角变圆。
If you want to round a row of cells so that the left- and rightmost elements are rounded, you need to use the :first-childand :last-childpseudo classes:
如果要舍入一行单元格，以便舍入最左侧和最右侧的元素，则需要使用:first-child和:last-child伪类：
tr td:first-child {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
tr td:last-child {
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
first-childis not supported by IE6, and while IE7 adds support for it, it still lacks last-child. But that doesn't matter in your case as border-radiuswouldn't work in those browsers anyway.
first-childIE6 不支持，虽然 IE7 增加了对它的支持，但它仍然缺乏last-child. 但这在您的情况下并不重要，因为border-radius无论如何在这些浏览器中都不起作用。
回答by IqbalHamid
Lesson in Table Borders...
表格边框课程...
NOTE: The HTML/CSS code below should be viewed in IE only. The code will not be rendered correctly in Chrome!
注意：下面的 HTML/CSS 代码只能在 IE 中查看。代码将无法在 Chrome 中正确呈现！
We need to remember that:
我们需要记住：
A table has a border: its outer boundary (which can also have a border-radius.)
The cells themselves ALSO have borders (which too, can also have a border-radius.)
The table and cell borders can interfere with each other:
The cell border can pierce through the table border (ie: table boundary).
To see this effect, amend the CSS style rules in the code below as follows:
i. table {border-collapse: separate;}
ii. Delete the style rules which round the corner cells of the table.
iii. Then play with border-spacing so you can see the interference.However, the table border and cell borders can be COLLAPSED (using: border-collapse: collapse;).
When they are collapsed, the cell and table borders interfere in a different way:
i. If the table border is rounded but cell borders remain square, then the cell's shape takes precedence and the table loses its curved corners.
ii. Conversely, if the corner cell's are curved but the table boundary is square, then you will see an ugly square corner bordering the curvature of the corner cells.
Given that cell's attribute takes precedence, the way to round the table's four corner's then, is by:
i. Collapsing borders on the table (using: border-collapse: collapse;).
ii. Setting your desired curvature on the corner cells of the table.
iii. It does not matter if the table's corner's are rounded (ie: Its border-radius can be zero).
表格有一个边界：它的外边界（也可以有一个边界半径。）
单元格本身也有边界（也可以有边界半径。）
表格和单元格边框可能会相互干扰：
单元格边框可以穿透表格边框（即：表格边框）。
要看到这种效果，修改CSS样式规则在下面的代码如下：
我。表{边界折叠：分开；}
ii. 删除围绕表格角单元格的样式规则。
三、然后玩边框间距，以便您可以看到干扰。但是，表格边框和单元格边框可以被折叠（使用：border-collapse:collapse;）。
当它们折叠时，单元格和表格边框以不同的方式干扰：
一世。如果表格边框是圆形的，但单元格边框保持方形，则单元格的形状优先，表格将失去其弯曲的角。
ii. 相反，如果角单元是弯曲的但表格边界是方形的，那么您将看到一个丑陋的方形角与角单元的曲率接壤。
考虑到单元格的属性优先，环绕表格四个角的方法是：
一世。折叠表格上的边框（使用：border-collapse：collapse;）。
ii. 在表格的角单元格上设置所需的曲率。
三、桌子的角是否圆角并不重要（即：它的边界半径可以为零）。
.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
}
.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.zui-table-rounded thead th {
background-color: #CFAD70;
}
.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
} <table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>3,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>,001,000</td>
</tr>
</tbody>
</table>回答by Manu
I got it to work without a table, using div, with :
我让它在没有桌子的情况下工作，使用 div，使用：
display: table-cell;
vertical-align: middle;
回答by William Hu
tr td {
border: 1px solid #dedede;
border-radius:3px;
}
回答by rahul
<style type="text/css">
.test
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: #a9a9a9 1px solid; .
width: 200px;
height: 50px;
}
</style>
<table class='test'>
<tr>
<td>
this is a test
</td>
</tr>
</table>
This works for me in Chrome and FF.
这在 Chrome 和 FF 中对我有用。
