HTML 表 THEAD 元素背景颜色不四舍五入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20921689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table THEAD Element Background color not rounding
提问by malkassem
I have the following HTML & CSS
我有以下 HTML 和 CSS
HTML
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
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 jsFiddlefor this too. The background in the THEAD always bleeds / runs out of the border and does not round.
我也为此创建了jsFiddle。THEAD 中的背景总是流血/跑出边界并且不圆。
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.
我在 IE、FF 和 chrome 中进行了测试。这在 chrome 中最为明显，因为流血发生在边界上方，而在 IE 和 FF 中，流血发生在边界之上。
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.
非常感谢解决问题的任何帮助（使背景在边缘正确停止）。我确实尝试在 TH 元素上添加 Border-Radius，但这没有用。
回答by eevaa
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:
您需要将圆角应用于顶部的第一个和最后一个表格单元格。将 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;
}
Demo JsFiddle
演示JsFiddle
回答by Paul Hendriks
try this (worked for me in FF)
试试这个（在 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;
}
回答by Kostis
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;
}
