表格的欄位為什麼不對齊

Table Display Bug

這是一個舊頁面內容，裡面的本來都很正常。但近來有使用者慢慢更新作業系統或瀏覽器後，發現表格原本被隱藏的欄位在點擊後不會正常排版。各位可以點擊標題測試，如果你是舊IE 6~IE 9，以上測試是正常的。但從IE 10開始，上述表格欄位就會不正常。（包含目前主流瀏覽器都不正常）

CSS：display

原因在於現行瀏覽器對於display裡屬性解析已經和以往不同，可以參考Style display Property，列表如下：

Value	Description
block	Element is rendered as a block-level element
compact	Element is rendered as a block-level or inline element. Depends on context
inherit	The value of the display property is inherited from parent element
inline	Element is rendered as an inline element. This is default
inline-block	Element is rendered as a block box inside an inline box
inline-table	Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item	Element is rendered as a list
marker	This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
none	Element will not be displayed
run-in	Element is rendered as block-level or inline element. Depends on context
table	Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption	Element is rendered as a table caption (like <caption>)
table-cell	Element is rendered as a table cell (like <td> and <th>)
table-column	Element is rendered as a column of cells (like <col>)
table-column-group	Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group	Element is rendered as a table footer row (like <tfoot>)
table-header-group	Element is rendered as a table header row (like <thead>)
table-row	Element is rendered as a table row (like <tr>)
table-row-group	Element is rendered as a group of one or more rows (like <tbody>)

修改block改為table-row即可解決。簡單筆記一下。