表列未对齐

Question

请考虑以下事项（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>

使用 display：block 时，为什么第三行中的单元格未对齐？

我需要能够隐藏（ display：none ）并显示（ display：block ）具有正确列对齐的表行。

Answer 1

默认情况下，行由浏览器样式表设置display: table-row;。显然它与display: block完全不同。

你应该在CSS中做的是：

.row_three {
    font-size: 12px;
    display: table-row;
}

Answer 2

不要在表格中使用“display：block”。我会说，不要使用表格来处理你正在做的事情，尝试使用DIV。