如何在表格中添加圆角答案

【问题标题】：How to add rounded corners to a table如何在表格中添加圆角
【发布时间】：2017-11-22 20:05:07
【问题描述】：

据我了解，表格可以像其他元素一样具有 webkit 边框半径样式：

HTML

<table class="list-table">
    <thead>
        <tr>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tables are misunderstood</td>
        </tr>
    </tbody>
</table>

CSS

.list-table {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    border: 4px solid red;
    border-collapse: collapse;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

...那我哪里错了？现场演示请看这里：http://bootply.com/79469#

【问题讨论】：

与表格展示有关。将.list-table 设置为display: block;。

标签： html css html-table rounded-corners

【解决方案1】：

摆脱border-collapse: collapse; 规则。

jsFiddle example

【讨论】：

【解决方案2】：

将你的表格放在一个 div 中，并在 div 而不是表格上做你的边框半径

http://bootply.com/79471

    div {
    border: 4px solid red;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }

【讨论】：

【解决方案3】：

.list-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 4px solid red;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

jsFiddle

【讨论】：