CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netcss
Administrateur
Administrateur

Reputation: 901

Table Column Misalignment

Please consider the following (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>

Why are the cells in third row misaligned when using display: block ?

enter image description here

I need to be able to hide (display: none) and show (display: block) the table rows with the correct column alignment.

Upvotes: 0

Views: 900

Answers (2)

2D3D4D
2D3D4D

Reputation: 131

Don't use "display: block" with a table. I would say, do not use tables at all for what you are doing, try working with DIVs.

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

By default, rows have display: table-row; set by the browser style sheet. And apparently it is quite different from display: block.

What you should instead do in your CSS is:

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

Upvotes: 4

Related Questions