HTML表格THEAD元素背景颜色不圆化

Question

我有以下HTML和CSS

HTML

<table class="StandardTable">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width: 25%">A</td>
            <td style="width: 25%">B</td>
            <td style="width: 25%">C</td>
            <td style="width: 25%">D</td>
        </tr>
    </tbody>
</table>

CSS

.StandardTable {
    border: 1px solid #656565;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 5px #888888;
    width: 300px;
    margin-bottom: 15px;
    border-spacing: 0;
}
.StandardTable thead {
    border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 5px;
    background-color: lightgray;
}

我也为此创建了jsFiddle.THEAD中的背景总是流出/跑出边界而不是圆形.

我在IE,FF和Chrome中测试过.在铬中最明显的是因为流出发生在IE和FF之间的边界上方,在那里发生了流血.

非常感谢任何帮助解决问题(使背景在边缘正确停止).我确实尝试在TH元素上添加Border-Radius,但这不起作用.

Answer 1

您需要将圆角应用于thead中的第一个和最后一个表格单元格.将thead的背景设置为透明,并添加以下内容:

.StandardTable thead th{
    background: lightgray; 
}

.StandardTable thead th:first-of-type{
    border-top-left-radius: 10px; 
}

.StandardTable thead th:last-of-type{
    border-top-right-radius: 10px; 
}

演示JsFiddle