table设置圆角的两种方式

·  阅读 3739

默认代码

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值为collapseborder-collapse:collapseborder-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继承divborder-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;
}
复制代码

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改