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

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>

讀完就會直接顯示表格內容，速度將會差非常多。