Html 边框半径html表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20036077/
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
Border radius html table
提问by Niels S?nderb?k
I've been trying to apply some rounded corners to a table of mine, but I just can't seem to get it right. My table is being collapsed, once the <thead>is clicked on. The <thead>need to only have top rounded corners, while the last <tr>element needs to only have bottom rounded corners. I'm using bootstrap as a framework.
我一直在尝试将一些圆角应用到我的桌子上，但我似乎无法做到正确。<thead>单击后，我的表正在折叠。该<thead>只需要有顶级圆角，而最后一个<tr>元素需要只有底部圆角。我使用引导程序作为框架。
Currently my design look like this:
目前我的设计是这样的：
I want my <head>to look like this:
我希望我<head>的看起来像这样：
while the last element still have bottom rounded corners.
而最后一个元素仍然有底部圆角。
table.html
表格.html
<table align="center" class="table table-curved" id="nextTeamTable">
<thead data-parent="#bodyContainer" data-toggle="collapse" data-target="#tbodyCollapse">
<tr>
<th>HeadTitle</th>
</tr>
</thead>
<tbody class="collapse" id="tbodyCollapse">
<tr>
<td>Body1</td>
<td>Body2</td>
<td>Body3</td>
</tr>
</tbody>
</table>
table.css
表格.css
.table-curved {
border-collapse:separate;
border: solid #ccc 1px;
border-radius: 25px;
}
.table-curved tr:last-child td
{
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
回答by Mike Barwick
EDIT- Try this: Put overflow:hiddenon the .tabled-curvedwith the border-radius: 25px;. Then just Remove the rest of the border-radius CSS
编辑-试试这个：将overflow:hidden在.tabled-curved与border-radius: 25px;。然后只需删除其余的边框半径 CSS
