当前位置:文档之家› CSS中表格不被撑开的解决办法

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 :相邻边被合并

css,表格,表头

竭诚为您提供优质文档/双击可除 css,表格,表头 篇一:css固定表头不随滚动条移动 先说效果描述如图:涉及到数据保密的缘故所以数据弄掉了。效果为:整个grid数据会出现横向,竖向滚动条。其中所有的表头:操作,序号,测试1.。。。等等要素,不会随着竖向滚动条的滚动而发生下移动的变化。而“操作”,“序号”,“测试1”,“测试2”,“测试3”,“测试4”,“测试5”这几个列的要素则进行了横向固定,不会随横向滚动条的移动而移动。当横向滚动条向右边移动时,右边的要素往左边的移动部分会被左边的要素遮罩住。所以图里看到“测试6”,“测试7”直到“测试12”这几个title都被遮盖了,因为横向滚动条往右边移动了。 ①把下面的css保存起来作为.css文件,然后在jsp页面进行引入 div#divcontainer { height:300px;overflow:auto;overflow-y:scorll;margin

-top:-1px;-1px; } table.lock { border-collapse:collapse; border-right:gray1pxsolid; border-bottom:gray1pxsolid; border-color:gray; } td.locked/*td标签水平与垂直方向锁住单元格,不随鼠标或滚动条移动*/{ z-index:30;position:relative; top: expression(parentnode.parentnode.parentnode.parentn ode.scrolltop); left: expression(parentnode.parentnode.parentnode.parentn ode.scrollleft); background-color:#cccccc;text-align:center;

具备排序功能的表格(JS+CSS+table)

具备排序功能的表格(JS+CSS+table)-