HTML Table 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;
}

I have created the jsFiddle for this too. The background in the THEAD always bleeds / runs out of the border and does not round.

I tested in IE, FF, and chrome. It is most apparent in chrome because the bleed happens above the border where in IE and FF the bleed happens under.

Any help in fixing the issue (make the background stop correctly around the edges), is greatly appreciated. I did try to add Border-Radius on TH element, but that did not work.

Answer 1

You need to apply the rounded corners to the first and last table cell in the thead. Set the background for thead to transparent, and add this:

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

Demo JsFiddle

Answer 2

try this (worked for me in 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

Another workaround is to do the 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;
}