javascript - 表格列错位

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

不要在表格中使用“显示：块”。我想说，根本不要使用表格来做你正在做的事情，尝试使用 DIV。