CSS教程:表格不被撑开的解决办法_Css3.0_css2.0_html5

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Css3.0_css2.0_html5

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

夜鹰教程网来源：www.yyjcw.com 日期：2016-11-12 20:03:15

解决办法：先用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元素? 下一条： DivCSS网页布局对网站搜索引擎优化的影…

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网