CSS 如何仅在桌头上创建圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9873936/
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-to create rounded corners on Table Head only
提问by Astronaut
I would like to know how to create a rounded corners on a table head only?
我想知道如何仅在桌头上创建圆角？
Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.
附加细节...我想要一个圆头的桌子，桌子的其余部分是一个矩形，只是第一个标题行应该有圆角。
回答by Sven Bieder
The problem is, that you need to make the certain inner elements round.
问题是，您需要使某些内部元素变圆。
So you have to make for the first th and the last th round to get the wished solution.
因此，您必须进行第一轮和最后一轮才能获得所需的解决方案。
table th:first-child{
border-radius:10px 0 0 10px;
}
table th:last-child{
border-radius:0 10px 10px 0;
}
回答by Bram Vanroy
There are a number of options. It depends on what you really want to achieve visually.
有多种选择。这取决于您真正想要在视觉上实现什么。
But be sure that border-collapseis NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius
但请确保它border-collapse没有设置为折叠，因为那将不起作用。有关更多信息，请参阅此 mozilla 链接：https: //developer.mozilla.org/en/CSS/border-radius
#uno,
#due th,
#tre th {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border: 1px solid black;
}
#tre td {
border: 1px solid black;
}<table id="uno" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="due" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<br>
<table id="tre" border="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>回答by TryHarder
It would be easier to help you if we saw your code or at least the code that didn't work for you.
如果我们看到您的代码或至少是对您不起作用的代码，那么帮助您会更容易。
Anyway, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html
无论如何，本教程似乎与您的问题有关http://www.jeox.com/docs/manual/web/round_table_corners.html
EDIT: Or this one http://blog.jezmckean.com/css3-rounded-table-corners-no-images/
编辑：或者这个http://blog.jezmckean.com/css3-rounded-table-corners-no-images/
