CSS教程:表格不被撐開的解決辦法

2024-07-11 09:03:45

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：解決辦法：先用noWrap強行令文字不換行，再用style="table-layout: fixed;; word-break: break-all;;border-collapse: collapse"強制表格不撐開，即達到效果。

今天在做一個用戶留言列表的時候，用到了表格。用戶名為英文字符時，就會把固定寬度的單元格撐開。之前也有遇到過。解決辦法：先用noWrap強行令文字不換行，再用style="table-layout: fixed;; word-break: break-all;;border-collapse: collapse"強制表格不撐開，即達到效果。
   需要注意的是：用了nowrap的單元格設置的寬度要用百分比，不然還是會撐開。我們可以給表頭的單元格設置寬度。火狐下還要在td里面嵌套一個div。

附：

nowrap:一般用在td中禁止自動換行

table-layout:auto | fixed
auto  :　默認值。默認的自動算法。布局將基于各單元格的內容。表格在每一單元格內所有內容讀取計算之后才會顯示出來
fixed  :　固定布局的算法。在這種算法中，表格和列的寬度取決于 col 對象的寬度總和，假如沒有指定，則會取決于第一行每個單元格的寬度。假如表格沒有指定寬度( width )屬性，則表格被呈遞的默認寬度為 100% 。

word-break:break-all和word-wrap:break-word都是能使其容器如DIV、TD的內容自動換行。
word-break : normal | break-all | keep-all
word-wrap : normal | break-word
它們的區別就在于：

1，word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

border-collapse : separate | collapse
取值：
separate  :　默認值。邊框獨立（標準HTML）
collapse  :　相鄰邊被合并

上一篇：網頁制作教程:簡單總結CSS的基礎屬性

下一篇：清理無用的CSS樣式的幾個有用工具