網頁

表格的欄位為什麼不對齊

表格的欄位為什麼不對齊

表格的欄位不對齊

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即可解決。簡單筆記一下。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。