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

Question

I have the following 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中进行了测试。在chrome中最明显，因为溢出发生在边框上方，而在IE和FF中溢出发生在下方。

非常感谢任何帮助解决这个问题（使背景正确停止在边缘周围）。我尝试在TH元素上添加Border-Radius，但没有起作用。

- malkassem

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

- eevaa

Answer 2

尝试这个（在我的火狐浏览器中有效）。

.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 tr th {
    background-color: lightgray;
}

.StandardTable thead tr th:first-child {
    z-index:-1;
    border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
.StandardTable thead tr th:last-child {
    z-index:-1;
    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

- Paul Hendriks

Answer 3

另一个解决方法是执行以下操作。

.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;
    background-color: lightgray;
}
.StandardTable tbody tr td {
    background-color: white;
}

.StandardTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.StandardTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

- Kostis