html中设置table圆角边框,css设置table圆角边框不起作用是什么原因

css设置table圆角边框不起作用的原因是：属性border-collapse:collapse和属性border-radius不兼容。正确方法如【border-collapse: separate;border-spacing:0】。

本文环境：windows10、css3，本文适用于所有品牌的电脑。

原因分析：

在table中设置border-radius发现不起作用，原因是border-collapse:collapse和border-radius不兼容。

(学习视频分享：css视频教程)

css：border-collapse: separate;

border-spacing: 0;

代码实现：

#table_wrap > table {

font-size: 16px;

text-align: center;

margin: 0 auto;

border-collapse: separate;

border-spacing: 0;

border: 2px #000;

}

table thead tr,table tbody tr {

height: 50px;

line-height: 50px;

/*background-color: pink;*/

}

table tr th:first-child,table tr td:first-child {/*设置table左边边框*/

border-left: 2px solid #eaeaea;

}

table tr th:last-child,table tr td:last-child {/*设置table右边边框*/

border-right: 2px solid #eaeaea;

}

table tr td:first-child,

table tr td:nth-child(2),

table tr td:nth-child(3),

table tr td:last-child{/*设置table表格每列底部边框*/

border-bottom: 2px solid #eaeaea;

}

/*table tr:last-child td:first-child,

table tr:last-child td:nth-child(2),

table tr:last-child td:nth-child(3),

table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

border-bottom: 2px solid #000;

}*/

table tr th {

background: #eaeaea;

}

table tr:first-child th:first-child {

border-top-left-radius: 12px;

}

table tr:first-child th:last-child {

border-top-right-radius: 12px;

}

table tr:last-child td:first-child {

border-bottom-left-radius: 12px;

}

table tr:last-child td:last-child {

border-bottom-right-radius: 12px;

}

头部1头部2头部3头部4

1内容11内容21内容31内容42内容12内容22内容32内容43内容13内容23内容33内容4

实现效果：

相关推荐：CSS教程