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;
}