打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
网页中强制固定表格宽度
一般我们在制作网页的时候,会往表格的单元格中插入一些文字,但如果插入的文字比较长,则会促使整个表格变得很宽,极其不美观,甚至会影响整个网页的布局。
而且在有一些时候,我们会因为一些需要只用到一个多大的表格。这时候就要用到强制固定表格大上这个标签。
但是一般情况下,即便是你设置了表格的宽度为某个像素,例如:100px,也不能阻止表格因其单元格文字的过长而变宽。
那么我们必须采取CSS样式的方式来控制。其实也很简单,只要在表格的属性中,加入以下代码:
 style=";word-break: break-all; word-wrap: break-word;" 即可。
    完整的写法例如:
       <table width="100px" style=";word-break: break-all; word-wrap: break-word;" >
     <tr><td>asdfghjkl;qwertyuiopzxcvbnm,</td></tr>
<table/>
另外:如果你是在Dreamweaver的“设计”视图中制作网页,那可是看不出表格固定宽度的效果的,因为文字会自动换行。
因此必须要保存页面之后,预览才能观察得到。
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  :  相邻边被合并

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
【HTML】表格自动换行
表格中的tableLayout 属性
表格及表单属性
table-layout的fixed属性
建站教程>CMS建站>如何用css定义表格自动换行,避免变形
CSS样式更改——列表、表格和轮廓
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服