Styling specific columns and rows
- by hattenn
I'm trying to style some specific parts of a 5x4 table that I create. It should be like this:
Every even numbered row and every odd numbered row should get a different color.
Text in the second, third, and fourth columns should be centered.
I have this table:
<table>
<caption>Some caption</caption>
<colgroup>
<col>
<col class="value">
<col class="value">
<col class="value">
</colgroup>
<thead>
<tr>
<th id="year">Year</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
</tr>
</thead>
<tbody>
<tr class="oddLine">
<td>Berlin</td>
<td>3,3</td>
<td>1,9</td>
<td>2,3</td>
</tr>
<tr class="evenLine">
<td>Hamburg</td>
<td>1,5</td>
<td>1,3</td>
<td>2,0</td>
</tr>
<tr class="oddLine">
<td>München</td>
<td>0,6</td>
<td>1,1</td>
<td>1,0</td>
</tr>
<tr class="evenLine">
<td>Frankfurt</td>
<td>1,3</td>
<td>1,6</td>
<td>1,9</td>
</tr>
</tbody>
<tfoot>
<tr class="oddLine">
<td>Total</td>
<td>6,7</td>
<td>5,9</td>
<td>7,2</td>
</tr>
</tfoot>
</table>
And I have this CSS file:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 0px 5px;
}
#year {
text-align: left;
}
.oddLine {
background-color: #DDDDDD;
}
.evenLine {
background-color: #BBBBBB;
}
.value {
text-align: center;
}
And this doesn't work. The text in the columns are not centered. What is the problem here? And is there a way to solve it (other than changing the class of all the cells that I want centered)?
P.S.: I think there's some interference with .evenLine and .oddLine classes. Because when I put "background: black" in the class "value", it changes the background color of the columns in the first row. The thing is, if I delete those two classes, text-align still doesn't work, but background attribute works perfectly. Argh...
