`
gallon00
  • 浏览: 31407 次
  • 性别: Icon_minigender_1
  • 来自: 运城
文章分类
社区版块
存档分类
最新评论

[转][css] table-layout:fixed 属性的解说,IE、Firefox效果对比详解

阅读更多
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
分享到:
评论

相关推荐

    表格设置table-layout:fixed后对单元格宽度设置无效

    在对HTML中的表格进行样式设置时,若使用了CSS的table-layout:fixed属性,则可能会遇到列宽设置无效的问题,尤其是当表格中存在跨列或多列合并的单元格时。这主要是因为当表格布局设置为固定时,表格的列宽不是由...

    bootstrap-table-fixed-columns(css,js)

    总的来说,`bootstrap-table-fixed-columns`是一个增强Bootstrap表格功能的工具,它通过CSS和JavaScript实现了固定列效果,使得用户在处理大量数据时能更有效地导航。了解并熟练掌握这个扩展的使用,将有助于提升...

    CSS -webkit-box-orient: vertical属性编译后丢失问题详解

    这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法: /*! autoprefixe

    bootstrap-table-fixed-columns.zip

    `bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离,并在需要时添加额外的样式和布局,确保表头在滚动时始终保持可见。在实际应用中...

    bootstrap-table-fixed-columns.js

    &lt;table id="fixedTable" data-toggle="table" data-fixed-columns="true" data-fixed-column-left="1"&gt; &lt;th data-field="id"&gt;ID &lt;th data-field="name"&gt;Name &lt;th data-field="age"&gt;Age &lt;th data-field=...

    bootstrap-table-fixed-columns-v1.0.2.zip

    最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也是bootstrap-table作者写的)能实现冻结效果,但带来了其他问题,包括:排序失效、列宽错位、合并行无效等,于是引入该组件的同时,顺便解决了...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    文件 `bootstrap-table-fixed-columns.css` 是CSS样式表,用于定义插件的样式规则,确保修复后的功能在视觉上与原版Bootstrap Table兼容且美观。`bootstrap-table-fixed-columns.js` 是JavaScript文件,包含了修复和...

    css-pro-layout:CSS库,用于构建响应式和可自定义的布局

    CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 &lt; link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout

    bootstrap-table-fixed-columns-master.zip

    7. **兼容性测试**:进行浏览器兼容性测试,确保在主流浏览器(如Chrome、Firefox、Safari、Edge等)以及不同版本的浏览器上都能正常运行。 8. **性能优化**:对于大数据量的表格,可能需要关注插件的性能,例如...

    如何通过CSS样式设置单元格显示内容的长度.doc

    &lt;table bgcolor="red" style="table-layout:fixed"&gt; &lt;td style="width:100px;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;word-break:keep-all"&gt; 这就是你看到的效果了,如果你没有看到的话就...

    详解CSS3中的box-sizing(content-box与border-box)

    CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪异盒模型,低版本IE浏览器中的盒模型 ...

    基于ASP的留言板设计代码

    &lt;title&gt;ASP简易留言板--ASP simple postboard v1.21 &lt;style type="text/css"&gt; ...td { table-layout:fixed; word-break :break-all; font-family:"宋体"; font-size: 12px; line-height: 15px; }

    bootstrap-table-fixed-columns

    3. 兼容性:兼容主流的浏览器,如 Chrome、Firefox、Safari 和 Edge,确保用户在不同环境下都能获得一致的体验。 4. 定制化:提供多种配置选项,如固定列的数量、宽度以及是否同时固定首行和首列等,满足不同的需求...

    live-css-layout:css-layout 的实时编辑器

    "live-css-layout"就是这样一个专为CSS布局设计的实时编辑器,它使得在浏览器中直接编辑CSS并即时看到效果成为可能。 一、项目简介 "live-css-layout"是一款基于JavaScript构建的在线工具,允许开发者在浏览器环境...

    利用层的table-row、table-cell属性进行页面布局

    "利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术,尤其在早期的Web开发中广泛使用,尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...

    表格自动换行主义CSS属性

    通过以上对CSS属性的详细解析及应用实例的介绍,我们可以看出,合理利用`table-layout`、`word-break`和`word-wrap`等CSS属性,能够有效改善表格内文本的显示效果,尤其是在需要处理大量文本数据的情况下,自动换行...

    bootstrap冻结表头所需css与js.rar

    在使用这两个文件时,你需要先引入Bootstrap的基本样式库和JavaScript库,然后将`bootstrap-table-fixed-header.js`和`bootstrap-table-fixed-header.css`添加到你的HTML文件中。接着,为你的表格添加必要的类名...

    IE7下当position:fixed遇到text-align:center的解决方法

    在讨论解决IE7浏览器(或IE8的兼容模式)下,当position:fixed定位遇到外层容器使用text-align:center属性时出现的问题之前,需要了解几个关键的CSS知识点。 首先,IE7及早期版本的IE浏览器对CSS的支持不完全,尤其...

Global site tag (gtag.js) - Google Analytics