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

图片：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