css3技术

CSS中表格不被撑开的解决办法_div+css教程

字号+ 作者:H5之家 来源:H5之家 2015-09-17 16:56 我要评论( )

CSS中表格不被撑开的解决办法,学习CSS中表格不被撑开的解决办法,CSS中表格不被撑开的解决办法,查看CSS中表格不被撑开的解决办法,在用到表格的时候,当用户名为英

    在用到表格的时候,当用户名为英文字符时,很容易把固定宽度的单元格撑开。解决办法:先用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  :  相邻边被合并

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评