边界半径html表 [英] Border radius html table
问题描述
我一直在试图将一些圆角应用到我的表，但我似乎不能得到它的权利。我的表被折叠，一旦点击< thead> < thead> 只需要具有顶部圆角，而最后的< tr> 元素只需要有底部圆角。我使用bootstrap作为框架。
目前我的设计看起来像这样：
我想要< head> 看起来像这样：
table.html
<$>
< table align =centerclass =table table-curvedid =nextTeamTable>
< thead data-parent =＃bodyContainerdata-toggle =collapsedata-target =＃tbodyCollapse>
< tr>
< th> HeadTitle< / th>
< / tr>
< / thead>
< tbody class =collapseid =tbodyCollapse>
< tr>
< td> Body1< / td>
< td> Body2< / td>
< td> Body3< / td>
< / tr>
< / tbody>
< / table>
table.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;
}
strong> - 尝试这样：在 .tabled-curved 上放置 overflow：hidden border-radius：25px; 。然后只需删除border-radius CSS
的其余部分
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.
Currently my design look like this:
I want my <head> to look like this:
while the last element still have bottom rounded corners.
table.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
.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;
}
EDIT - Try this: Put overflow:hidden on the .tabled-curved with the border-radius: 25px;. Then just Remove the rest of the border-radius CSS
这篇关于边界半径html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
