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内容1 1内容2 1内容3 1内容4 2内容1 2内容2 2内容3 2内容4 3内容1 3内容2 3内容3 3内容4
实现效果：
相关推荐：CSS教程
以上就是css设置table圆角边框不起作用是什么原因的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616570.html
微信扫一扫 
支付宝扫一扫 
