Html设置表格撑开,CSS教程:表格不被撑开的解决办法

CSS教程:表格不被撑开的解决办法

2009-10-21

eNet&Ciweek

今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。解决办法：先用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 :　 相邻边被合并

相关频道：

eNews

您对本文或本站有任何意见，请在下方提交，谢谢！