CSS: thead, tbody, tfoot and background images

Browsers return strange results when you try to apply background images to the thead, tbody and tfoot table elements. Basically, this behavior varies from browser to browser but eventually I managed to get some consistent result by changing the default display role of these elements.

So I build up a test with the following HTML:

<table>

<thead>

	<tr>

		<th scope="col">Header 1</th>
		<th scope="col">Header 2</th>

	</tr>

</thead>

<tfoot>

	<tr>

	    <td>Footer cell</td>
	    <td>Footer cell</td>
	</tr>

</tfoot>

<tbody>

	<tr>
	    <td>Body cell</td>
	    <td>Body cell</td>
	</tr>

</tbody>

</table>

The final CSS styles for this test are as follows:

table {
	width: 604px;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	font: 100% Arial, sans-serif;
}

thead {
	background: url(thead.gif) no-repeat;
	color: #fff;
	display: table-caption;
	width: 604px;
}

tbody {
	height: 66px;
	width: 604px;
	background: #e0e0e0;
}

tfoot {
	background: url(tfoot.gif) no-repeat;
	color: #fff;
	width: 604px !important;
}

th {
	width: 302px;
	height: 66px;
	vertical-align: middle;
}

td {
	width: 302px;
	text-align: center;
	vertical-align: middle;
	height: 66px;
	background-image: none;
}

tbody td {background: #e0e0e0;}
tfoot tr {
	background: url(tfoot.gif) no-repeat;
	width: 604px;
	display: table;
}

As you can see, I've changed the default display role of the thead and tfoot elements. You can see this test below.

Test

Live test