强制固定表格宽度

如何强制固定dreamweaver网页表格宽度?前端

通常在制做网页的时候,会往表格的单元格中插入一些文字,但若是插入的文字比较长,则会促使整个表格变得很宽,极其不美观,甚至会影响整个网页的布局。 并且在有一些时候,会由于一些须要只用到一个多大的表格。这时候就要用到强制固定表格大上这个标签。 可是通常状况下,即使是你设置了表格的宽度为某个像素,例如:100px,也不能阻止表格因其单元格文字的过长而变宽。 那么必须采起CSS样式的方式来控制。其实也很简单,只要在表格的属性中,加入如下代码: style="table-layout:fixed;word-break: break-all; word-wrap: break-word;" 便可。 完整的写法例如: <table width="100px" style="table-layout:fixed;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"强制表格不撑开,即达到效果。ui

须要注意的是:用了nowrap的单元格设置的宽度要用百分比,否则仍是会撑开。咱们能够给表头的单元格设置宽度。火狐下还要在td里面嵌套一个div。设计

附:

  nowrap:通常用在td中禁止自动换行

  table-layout:auto | fixed
  auto  : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内全部内容读取计算以后才会显示出来
  fixed  :  固定布局的算法。在这种算法中,表格和列的宽度取决于 col
  对象的宽度总和,假如没有指定,则会取决于第一行每一个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为

100% 。code

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)的后端部分了。orm

2,word-wrap:break-word
  例子与上面同样,但区别就是它会把congratulation整个单词当作一个总体,若是该行末端宽度不够显示整个单词,它会自动把整个单词放到下

一行,而不会把单词截断掉的。对象

border-collapse : separate | collapse
  取值:
  separate  :  默认值。边框独立(标准HTML)
  collapse  :  相邻边被合并

详情www.zzarea.com教程

相关文章
相关标签/搜索