Check out this code snippet (http://jsfiddle.net/HaLGr/11/):
.head_row {
color: #FFFFFF;
background-color: #5D7B9D;
}
.row_one {
font-size: 12px;
}
.row_two {
font-size: 12px;
display: none;
}
.row_three {
font-size: 12px;
display: block;
}
<table name="main_table" id="main_tbl">
<tr>
<td class="head_row">Column 1</td>
<td class="head_row">Column 2</td>
</tr>
<tr class="row_one">
<td>Row One</td>
<td>Row One</td>
</tr>
<tr class="row_two">
<td>Row Two</td>
<td>Row Two</td>
</tr>
<tr class="row_three">
<td>Row Three</td>
<td>Row Three</td>
</tr>
</table>
What causes misalignment of the cells in the third row when using display: block ?
I want to be able to hide (display: none) and show (display: block) the table rows with proper column alignment.