羊皮紙 服務
       
       
      分享
       
      羊皮紙論壇

      羊皮紙論壇

      分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
      • 禁止廣告文
      • 知識傳播
      • 閱讀
      • 心靈成長
      • 創作
      • 文化傳承
      羊皮紙論壇目錄 / 程式設計 / 網頁/網站程式 / CSS /

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

      發表新主題
      隨機主題
      上個主題
      下個主題
      |
      善用 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> 讀完就會直接顯示表格內容,速度將會差非常多。

      • 關鍵字 : table, 屬性, layout, 下載, width, automatic, Table, 表格, 版面, 排版, 寬度, 定義, fixed, 顯示, 預設為, 預設, 關係, 過程中, 速度, 這就
      0 0
      2009-09-12T03:10:42+0000


      • 當您未登入羊皮紙時,可以利用臉書 Facebook 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
      發表迴響
       
      驗證字串

      Facebook 粉絲專頁

      QRCode 條碼 & APP 連結

      說明
      本頁網址

      在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
      QRCode