两种实现Table圆角的方法

默认代码

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;
}