HTML表格的边框半径

Question

HTML表格的边框半径

htmltwitter-bootstrapcss

27

我一直在尝试为我的表格应用一些圆角，但似乎一直无法正确实现。当点击<thead>时，我的表格会被折叠。需要让<thead>只有顶部有圆角，而最后的<tr>元素只有底部有圆角。我正在使用Bootstrap框架。

目前，我的设计看起来像这样：

Current header

Current last element

我希望我的<head>看起来像这样：

enter image description here

同时，最后一个元素仍然拥有底部圆角。

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;   
}

- Niels Sønderbæk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Barwick · Accepted Answer

编辑 - 尝试这样做：在带有 border-radius: 25px; 的 .tabled-curved 上放置 overflow:hidden。然后只需删除其余的边框半径 CSS。