Heyxu Forum

Sharing let knowledge Spreaded, Reading let spirits growth, Creative let culture extended, Let us
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
Forum Dictionary / Programming / 網頁/網站程式 / CSS /

善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

New Subject
善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉。但最大的缺點就是版面調整不像 CSS layout 那麼方便,而且網頁出現的時間比較長,版面的問題應該無解,但表格顯示的速度卻可以利用 table-layout 屬性的設定達到目標。

CSS 的 table-layout 屬性有兩個可以設定的值:

  • automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
  • fixed 表格的總寬度決定於表格 width 屬性的定義,以及各欄位(Column) width 屬性的定義

預設的 automatic 有個特性,就是當瀏覽器開始下載 HTML 資料時,從 <table> 一直讀到 </table> 才會將網頁顯示出來,這是因為瀏覽器因為不確定 table 應該顯示(Render)的寬度,因此必須等到表格都下載完成後才會顯示資料。

所以你如果利用 <table> 設定整個網頁版面,就會很容易發現網頁下載時會先看到白白的一片底色,最後才會突然出現網頁,這就是因為 table-layout 預設為 automatic 的關係。

所以,當你的表格擁有固定的寬度,例如版面寬度定義為 950px 時,只要將 <table> 的 table-layout 屬性設定成 fixed,並且再設定 width 屬性,就會明顯感覺到表格在下載 HTML 的過程中不會等待 </table> 讀完就會直接顯示表格內容,速度將會差非常多。

  • Keywords : table, 屬性, layout, 下載, width, automatic, Table, 表格, 版面, 排版, 寬度, 定義, fixed, 顯示, 預設為, 預設, 關係, 過程中, 速度, 這就
0 0

  • Now, you can post comments by Facebook Account when your Heyxu account was logout or unvariable. whatever, we suggest to post comment by Heyxu Account to get more bounds to join new events of Heyxu

Facebook Page

QR-Code and APP Launcher

User Guide
This Webpage

In those service tabs, "Scan QRCode, in mobile device" or "Click the button, in this device" to open webpage or APP-related operations.
  • Auto Platform
    For better browsing experience, it will auto detects your device to display webpage.
  • Bug Report
    Tell us about the idea, problem and errors you found.
  • Copyright
    © 2009 Heyxu Multimedia, Inc - All rights reserved.
  • Revised Version
    27 Jul 2019 (GMT+8)