Using CSS for solid color background across/between table cells
Consider the following code:
HTML:
<table>
<tr>
<td>Hello</td>
<td>Stack</td>
<td>Overflow</td>
</tr>
<tr>
<td>some</td>
<td>text</td>
<td>here</td>
</tr>
</table>
开发者_C百科
CSS:
table {
border-spacing: 40px 10px;
border-collapse: separate;
}
tr:first-child {
background-color: #aaa;
}
td {
padding: 5px;
}
I would like the background color on the first row to be between the cells also.
How could I do this ?
I'm sorry but according to this (the last paragraph of section 17.5.1), the background between the cells when you use "border-collapse: separate" is the background of the table element.
This is not possible when using border-spacing
, but you could try using individual cell padding instead...
table {
border-collapse: separate;
}
tr:first-child td {
background-color: #aaa;
}
td {
padding: 10px 40px;
}
Live demo available here
精彩评论