默认代码
table {
width: 100%;
background-color: yellowgreen;
text-align: center;
}
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
原因
如果我们直接对table
设置border-radius
是不会生效的, 因为table
的默认属性border-collapse
值为collapse
。border-collapse:collapse
和border-radius
不兼容。因此,我们需要将border-collapse
的值设置为separate
即可。
第一种方式
我们对上面的默认代码做如下更新
table {
....
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
border: solid 2px #dfdfdf;
}
效果如图

通常情况下我们会给表格设置border
来显示单元格大小
td, th {
border-right: 2px solid #1E90FF;
height: 30px;
text-align: center;
}
td {
border-top: 2px solid #1E90FF;
}
td:last-child, th:last-child {
border-right-color: transparent;
}

第二种方式
我们可以给table
外再套上一层div
div
样式如下
div {
width: 100%;
border-radius: 10px;
overflow: hidden;
}
但这样并不能做到最好效果, look

我们可以看到四个边角并不完美, 我们需要让table
继承div
的border-radius
改造代码如下
div {
width: 100%;
border-radius: 10px;
overflow: hidden;
}
table {
background-color: yellowgreen;
width: 100%;
text-align: center;
border-spacing: 0;
border-radius: inherit;
border: solid 2px #dfdfdf;
}
当当当!!!

如果我们此时给table
设置一下单元格的border
属性
td, th {
border: 2px solid #1E90FF;
height: 30px;
text-align: center;
}

如何消除多余的单元格线条呢?
td {
border-top: 2px solid #1E90FF;
height: 30px;
text-align: center;
}
th, td {
border-right: 2px solid #1E90FF;
}
th:last-child, td:last-child {
border-right-color: transparent;
}
