Question

我有以下HTML＆amp; 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，但这不起作用。

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

Answer 2

尝试这个（在FF中为我工作）

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

Answer 3

另一种解决方法是执行following

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

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

3 个答案: