博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table中内容过长,table改变的问题
阅读量:5308 次
发布时间:2019-06-14

本文共 872 字,大约阅读时间需要 2 分钟。

在看效果时发现在Chrome中的table已经不是原来设置的宽度了,而其他浏览器是好的,经过百度发现是单元格内容过多造成的,但这时候给td设置宽度已经不适用了,此时就要给table设置 table{table-layout:fixed;}

table-layout属性

用法:作用于table标签,显示单元格列宽的计算法则。

取值:auto(默认)列宽由内容确定。加载慢

        fixed :固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。说明:设置或检索表格的布局算法。。加载快。

常见问题,第一行设置单元格合并后,第二行的宽度显示为平分。

解决办法,加一个隐形行设定为第一行,display:none;

: normal | break-word 取值: normal : 默认值。允许内容顶开指定的容器边界break-word : 内容将在边界内换行。如果需要,词内换行(  )也将发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。
: normal | break-all | keep-all 取值:normal : 默认值。允许在词间换行break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本说明:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用 break-all 。

  table{word-break:break-all; word-wrap:break-word; table-layout:fixed; }

转载于:https://www.cnblogs.com/yangjing1314/p/8241719.html

你可能感兴趣的文章
【转】redo与undo
查看>>
解决升级系统导致的 curl: (48) An unknown option was passed in to libcurl
查看>>
Java Session 介绍;
查看>>
spoj TBATTLE 质因数分解+二分
查看>>
Django 模型层
查看>>
dedecms讲解-arc.listview.class.php分析,列表页展示
查看>>
Extjs6 经典版 combo下拉框数据的使用及动态传参
查看>>
【NodeJS】http-server.cmd
查看>>
研磨JavaScript系列(五):奇妙的对象
查看>>
面试题2
查看>>
selenium+java iframe定位
查看>>
P2P综述
查看>>
第五章 如何使用Burp Target
查看>>
Sprint阶段测试评分总结
查看>>
sqlite3经常使用命令&语法
查看>>
linux下编译openjdk8
查看>>
【python】--迭代器生成器装饰器
查看>>
Pow(x, n)
查看>>
安卓当中的线程和每秒刷一次
查看>>
每日一库:Modernizr.js,es5-shim.js,es5-safe.js
查看>>