table-layout

在網頁中我們常用table來呈現資料，但有時儲存格的內容有較長的單字或數字超過欄位寬度的設定，這時就會發生原先版面的設計跑掉，那我們應如何解決這個問題呢？答案就是利用table-layout:fixed; word-break:break-all，下面我們將以圖例說明

table總寬度為200px，有二個欄位各100px

網頁呈現畫面，雖然欄位設定為各100px，但由於數字的長度已大於欄位的寛度，所以版面跑掉。

修改原始碼，在table的style增加table-layout:fixed

網頁呈現畫面，這裡注意雖然版面正常了，但數字部份被截掉一些

再次修改原始碼，增加word-break:break-all

網頁呈現畫面

在上方的圖例是以IE 6做為測試用的瀏覽器，如果有興趣的人也可以測試其他瀏覽器，另外word-break:break-all的語法是以每個字完做結尾，如果網頁內容主要是以英文為主並且是給西方人觀看，這時候單字因為會被強迫折行，造成語意不清，所以使用上要注意。