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;
}
table tr th:first-child,table tr td:first-child {
border-left: 2px solid #eaeaea;
}
table tr th:last-child,table tr td:last-child {
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{
border-bottom: 2px solid #eaeaea;
}
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教程