CSS设置table表格圆⾓边框
有些情况下需要给表格设置圆⾓，但是border-radius与border-collapse:collapse；会产⽣冲突，给table设置border-radius并不会⽣效。可以通过减少单元格框线的⽅式来不设置boder-collapse;collapse; 这样就能给表格添加圆⾓了。
效果如图
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
table{
margin: 50px auto;
border-spacing: 0;
}
table th{
width: 100px;
height: 30px;
line-height: 30px;
}
table td{
width: 100px;
height: 30px;
text-align:center;
line-height: 30px;
border: 1px solid gray;
}
table tr:first-child td:first-child{
border-top-left-radius: 10px; /* 设置table左下圆⾓ */
}
table tr:first-child td:last-child{
border-top-right-radius: 10px;/* 设置table右下圆⾓ */
}
table tr:last-child td:first-child{
border-bottom-left-radius: 10px; /* 设置table左下圆⾓ */
}
table tr:last-child td:last-child{
border-bottom-right-radius: 10px;/* 设置table右下圆⾓ */
}
table tr:first-child td{
border-bottom: none;
}
table tr:last-child td{
border-top:none;
}
table tr td:nth-child(2){
table tr td:nth-child(2){    border-right:none;
border-left:none;
}
</style>
</head>
<body>
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
table设置内边框
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。