那些遇到过的问题

相关疑难解决方法(0)

边界半径html表

我一直试图将一些圆角应用到我的桌子上,但我似乎无法做到正确.<thead>点击后,我的桌子正在折叠.该<thead>只需要有顶级圆角,而最后一个<tr>元素需要只有底部圆角.我正在使用bootstrap作为框架.

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

当前标题

当前最后一个元素

我希望我<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>
Run Code Online (Sandbox Code Playgroud)

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;   
}
Run Code Online (Sandbox Code Playgroud)

html css css3 twitter-bootstrap

Nie*_*bæk
lucky-day
27
推荐指数
1
解决办法
7万
查看次数

标签 统计

css ×1

css3 ×1

html ×1

twitter-bootstrap ×1