Set background for column group in HTML and CSS
Description
The following code shows how to set background for column group.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.myTable {<!-- w ww. j a v a 2 s .c o m-->
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #FFF;
}
.myTable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
}
.myTable-vertical tbody td {
border-top: none;
border-bottom: none;
}
.myTable-col-odd {
background-color: #EEF7EE;
}
.myTable-col-even {
background-color: #FFF;
}
</style>
</head>
<body>
<table class="myTable myTable-vertical">
<colgroup>
<col class="myTable-col-odd"></col>
<col class="myTable-col-even"></col>
<col class="myTable-col-odd"></col>
<col class="myTable-col-even"></col>
<col class="myTable-col-odd"></col>
</colgroup>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</tbody>
</table>
</body>
</html>