html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程

今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。解决办法：先用noWrap令文字不换行，再用style=table-layout:fixed;;word-break:break-all;;border-collapse:collapse强制表格不撑开，即达到效果。

CSS教程:表格不被撑开的解决办法—css教程，需要注意的是：用了nowrap的单元格设置的宽度要用百分比，不然还是会撑开。我们可以给表头的单元格设置宽度。火狐下还要在td里面嵌套一个div。

附：

nowrap:一般用在td中自动换行

auto:默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来

fixed:固定布局的算法。在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度(width)属性，则表格被呈递的默认宽度为100%。

它们的区别就在于：

2，word-wrap:break-word例子与一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。