Doreen
新手
新手
  • 最后登录2019-09-06
  • 发帖数1
阅读:168回复:0

[前端]在table表单里设置表单的border-radius

楼主#
更多 发布于:2019-08-28 20:53

图片:shili.png


如图所示,我想在table表单里设置一下他两边的圆角。
我用的是bootstrap里的class="table table-bordered " 这个类。
HTML源码:

<table class="table table-bordered ">
   <thead>
        <tr>
            <th class="text-center"><input type="checkbox" id="checkAll"/></th>
            <th class="text-center">序号</th>
            <th class="text-center">名称</th>
            <th class="text-center">规格</th>
            <th class="text-center">种类</th>
            <th class="text-center">颜色</th>
            <th class="text-center">净度</th>
            <th class="text-center">切工</th>
            <th class="text-center">火彩</th>
            <th class="text-center">形状</th>
            <th class="text-center">质地</th>
            <th>
                <button class="btn btn-default" id="D-tianjia">添加</button>
            </th>
        </tr>
   </thead>
</table>
CSS代码:这是设置第一排左上和右上的圆角代码,如果要设置左下和右下的圆角样式改一下选择器还有方向就好。
table thead tr:first-child th:first-child,
.table-bordered{
    border-top-left-radius: 12px;
}
table thead tr:first-child th:last-child,
.table-bordered {
    border-top-right-radius: 12px;
}
但是即便是设置了上面这个暂时也不能达到有圆角的效果,还需要添加下面这个css样式代码:
.table{
    border-collapse: separate;
    border-spacing: 0;
}
默认值,边框会被分开;再来一个边框距离0。

设置了以上的样式之后就可以达到如图所示的效果。


第一次写文章,语言表达得有些不够全面,如有不妥之处望各位大神多加指点,谢谢。
以后有bug都会来记录的,希望bug收集见证我的成长。
--Doreen
游客


返回顶部