table表格设置border-radius不生效
背景:视觉还原时一个小点,发现设置border-radius后不生效,百度发现是border-collapse: collapse和border-radius时不兼容。
解决办法:给th、td设置border以达到最后要的效果。
css:
table {
width: 500px;
height: 200px;
border: 1px solid #ccc;
border-radius: 10px;
border-spacing: 0;
// 因为表格默认的border-collapse: separate; 是边框分离模式。
// border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)
}
td {
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
td:last-child {
border-right: 0;
}
tr:last-child td{
border-bottom: 0;
}
html:
<table>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
效果图: