边界半径HTML表格

Niels Sønderbæk 发表于 Dev

尼尔斯·桑德贝克（NielsSønderbæk）

我一直在尝试在我的桌子上应用一些圆角，但我似乎无法正确地做到这一点。一旦<thead>点击，我的桌子就被折叠了。该<thead>只需要有顶级圆角，而最后一个<tr>元素需要只有底部圆角。我正在使用引导程序作为框架。

目前，我的设计如下所示：

当前标题

当前的最后一个元素

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

在此处输入图片说明

而最后一个元素仍具有底部圆角。

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

迈克·巴威克

编辑-试试这个：将overflow:hidden在.tabled-curved与border-radius: 25px;。然后只需删除其余的border-radius CSS

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。