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を使用すると、3 行目のセルがずれるのはなぜですか?

正しい列の配置でテーブルの行を非表示 ( display: none ) および表示 ( display: block )できるようにする必要があります。

Answer 1

デフォルトでは、行はdisplay: table-row;ブラウザのスタイル シートによって設定されています。そしてどうやら とはかなり違うようですdisplay: block。

CSS で代わりに行うべきことは次のとおりです。

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