请考虑以下 ( 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)具有正确列对齐的表格行。
最佳答案
默认情况下,行具有由浏览器样式表设置的display: table-row;
。显然它与 display: block
完全不同。
您应该在 CSS 中做的是:
.row_three {
font-size: 12px;
display: table-row;
}
关于javascript - 表列错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16945833/