加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 如何将边界半径应用于Bootstrap 3的表?

发布时间:2020-12-14 23:32:22 所属栏目:资源 来源:网络整理
导读:我希望桌子的顶角和底角有圆角. 我怎样才能做到这一点?现在,Bootstrap 3表的半径为0. 解决方法 试试这个 :- table class="table table-curved" ..../table .table-curved { border-collapse: separate;}.table-curved { border: solid #ccc 1px; border-ra
我希望桌子的顶角和底角有圆角.

我怎样才能做到这一点?现在,Bootstrap 3表的半径为0.

解决方法

试试这个 :-
<table class="table table-curved">
    ....
</table>    

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td,.table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读