table-layout:fixed 属性的解说
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决办法。
例1:(IE浏览器)普通的情况
CODE:
<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:
可以看到width=80并没有起作用,表格被字符撑开了。
例2:(IE浏览器)使用样式table-layout:fixed
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:
width=80起作用了,但是表格换行了。
例3:(IE浏览器)使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:width=80起作用了,换行也被干掉了。
例4:(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:不幸发生了,第一个td的nowrap不起作用了
例5:(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
效果:改成百分比,终于搞定了
例6:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果:把例5放到firefox下面,又ft了
例7:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<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>
效果:天下终于太平了
例8:(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>
CODE:
<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>
效果:nowrap又不起作用了
最终,例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。
原文:http://www.yici.net/content/text_all/text_0/311_1.html
分享到:
相关推荐
这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法: /*! autoprefixe
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
table-layout:fixed; } ***本文关键词:table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用...
如有使用疑问,联系本人,如有使用疑问,
<title>ASP简易留言板--ASP simple postboard v1.21 <style type="text/css"> ...td { table-layout:fixed; word-break :break-all; font-family:"宋体"; font-size: 12px; line-height: 15px; }
PostCSS自定义属性 使您可以按照规范在CSS中使用自。 :root { --color : red; } h1 { color : var ( --color ); } /* becomes */ :root { --color : red; } h1 { color : red; color : var ( --color ); } ...
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本IE浏览器中的盒模型 ...
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: CSS Code复制内容到剪贴板 transform-style: ...
bootstrap-table-fixed-header.js bootstrap-table-fixed-header.css 用于实现bootstrap冻结表头
幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。 CSS代码 CSS3里的column系列属性提供了各种不同的功能,通过组合...
css强制文字不换行,可给指定的容器增加white-space:nowrap即,下面把CSS示例写给大家,很简单
对于一个table,兼容IE与FF、Chrome的省略方式CSS写法: 复制代码代码如下: table{ width:200px; table-layout: fixed; } .autocut{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-...
PostCSS间隙属性 使您可以按照规范在CSS中使用gap , column-gap和row-gap速记属性。 .standard-grid { gap : 20 px ; } .spaced-grid { column-gap : 40 px ; row-gap : 20 px ; } /* becomes */ .standard-...
瑞典CSS属性整体CSS属性翻译成瑞典语如果任何字眼看起来很怪异,请随时提交拉取请求用法$ npm install --save swedish-css-properties /** * Getting Swedish CSS Properties * * @return { object } */var SECSS = ...
兼容性:Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。Safari 支持替代的 -webkit-transition-duration 属性。 Internet Explorer 9 以及更早版本的浏览器不支持 transition-...
数据集-css-属性 使用 CSS 属性的极具实验性的 Datasette 输出插件,灵感来自 Chris Coyier 的。 关于这个项目的更多信息:安装在与 Datasette 相同的环境中安装此插件。 $ datasette install datasette-css-...
table-layout : fixed; width : 100 % ; height : 100 % ; height : auto\9; /* IE 8 Hack */ min-height : 100 % ; position : relative; } . page-content { display : table-row; height : 100 % ; } . ...
Vue项目,位于main.js文件中: import 'vw-layout'如果您的项目使用webpack,则可以将关联的PostCSS插件配置添加到postcssrc.js文件。 module.exports = { "plugins": { "postcss-aspect-ratio-mini": {}, "postcss...