table-layout:fixed 属性的解说
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题:firefox下,内容会飘出框外,暂时没有找到解决办法,如果有可以解决此方法的朋友,欢迎来帖,小妮子将十分感激!
例1:(IE浏览器)长串英文自动回行
方法:同时加入word-wrap:break-word;
table{table-layout:fixed;word-wrap:break-word;}
例2:(IE浏览器)一个表格里的内容隐藏
方法:使用样式table-layout:fixed与nowrap(一行一列)
<style>
.tbl {table-layout:fixed}
</style>
<table class=tbl border=1 width=80>
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
效果:
abcdefghigklmnopqrstuvwxyz 1234567890
width=80起作用了,换行也被干掉了。
例3:(IE\Firefox浏览器)固定宽度使多余内容隐藏
方法:在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div (一行两列)
<style>
.tbl {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
效果: abcdefghigklmnopqrstuvwxyz 1234567890 abcdefghigklmnopqrstuvwxyz 1234567890
分享到:
相关推荐
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
为了让表格能够填充屏幕(剩余空白区域),常将其宽度属性定义为:100%,单元格也是用百分数来定义。 但这样就会出现问题: 如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式...
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也是bootstrap-table作者写的)能实现冻结效果,但带来了其他问题,包括:排序失效、列宽错位、合并行无效等,于是引入该组件的同时,顺便解决了...
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
如有使用疑问,联系本人,如有使用疑问,
赠送jar包:flink-table-runtime-blink_2.11-1.10.0.jar; 赠送原API文档:flink-table-runtime-blink_2.11-1.10.0-javadoc.jar; 赠送源代码:flink-table-runtime-blink_2.11-1.10.0-sources.jar; 赠送Maven依赖...
bootstrap-table-fixed-columnsbootstrap-table-fixed-columnsbootstrap-table-fixed-columns
table-layout:fixed; } ***本文关键词:table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用...
bootstrap-table样式固定列js插件,在网上看到下载资源比较少,免费提供给大家下载使用,方便开发进度。
qq论坛源码,含图标,* 基本定义 */ td,body { font-size:12px line-height:20px color:#222222 } ul,li,form,img {margin:0 padding:0 list...TABLE.TableFixed { table-layout:fixed } XMP { display:none }
一次性运行(不作为 wp-cli 命令添加) wp --require=../commands/table-prefix/table-prefix.php table-prefix change new_ ##未来增强想法 增强的多站点支持,目前只更改主表前缀,不允许您更改站点前缀(例如 ...
<title>ASP简易留言板--ASP simple postboard v1.21 A:link,A:active,A:visited{TEXT-DECORATION:...td { table-layout:fixed; word-break :break-all; font-family:"宋体"; font-size: 12px; line-height: 15px; }
script type =" text/javascript " src =" bower_components/angular-fixed-table-header/src/fixed-table-header.min.js " > </ script > 在应用程序中包含fixed.table.header模块作为依赖项。 angular...
赠送jar包:flink-table-common-1.12.7.jar; 赠送原API文档:flink-table-common-1.12.7-javadoc.jar; 赠送源代码:flink-table-common-1.12.7-sources.jar; 赠送Maven依赖信息文件:flink-table-common-1.12.7....
查看实例教程此指令依赖于 element-ui@2.12.0,使用前请熟悉:element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...