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下面,又失效了
例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都可以完美解决页面强制换行问题的解决方案。
我也继续查了一些资料,既然首行的宽度才起作用,那我是否可以定义一下首行呢。
发现了colgroup属性。
<colgroup>
<col style="width:10%;"></col>
<col style="width:30%;"></col>
<col style="width:40%;"></col>
<col style="width:10%;"></col>
<col></col>
</colgroup>
<tr>
<td colspan="5"> </td>
</tr> <tr>
<td nowrap bgcolor="#FFFFFF">文字文字文字文字文字文字</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr></table>
css中table-layout:fixed 属性的用法的更多相关文章
-
(转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
-
css中表格的table-layout属性特殊用法
table-layout: 属性1:auto,使用它,表格的大小由单元格里的内用决定,即td的宽高由内容的多少而变化. 属性2:fixed,如果内容是中文的话td的宽高固定,宽高有内容决定,没有限制. ...
-
CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
-
css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
-
CSS中:before和:after选择器的用法
在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧. 阅读原文:CSS中:before和:after选择器的用法
-
CSS中具有继承性的属性:
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
-
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
-
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
-
[转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
-
CentOS7 编译安装 Mongodb (实测 笔记 Centos 7.0 + Mongodb 2.6.6)
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...
-
exception is org.hibernate.exception.DataException: Could not execute JDBC batch update 	at
没有什么问题,但是却报了Could not execute JDBC batch update的错,主要是配置文件设置了关联,数据却没有关联造成的,只要数据正确就没有问题. 另外,造成这个原因的还可能 ...
-
前端性能优化jQuery性能优化
一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...
-
在linux下搭建STM32工程
转载自康神博客:http://blog.csdn.net/u013298300/article/details/50243935 在LINUX下开始一个STM32工程 在LINUX下开始一个STM32 ...
-
Python traceback的优雅处理
刚接触Python的时候,简单的异常处理已经可以帮助我们解决大多数问题,但是随着逐渐地深入,我们会发现有很多情况下简单的异常处理已经无法解决问题了,如下代码,单纯的打印异常所能提供的信息会非常有限. ...
-
windows安装nginx并存放静态资源
1.将nginx-windows.zip下载下来,然后点击nginx.exe 如果一闪而过并且打开网页输入localhost显示无法访问,打开error.log文件:No mapping for th ...
-
FileReader.FileWriter 执行文本复制
//导包动作必须做,否则会出现大片错误提示 import java.io.*; class FileReaderDemo { publicstatic void main(String[] args) ...
-
Javascript 在严格模式下不允许删除变量或对象
如下代码,运行后在浏览器中会报错. <script> "use strict"; var x = 3.14; delete x; </script>
-
(转)如何修改windows下mysql的字符集
原文:http://blog.csdn.net/yjz_sdau/article/details/52135050 (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值, 如 ...
-
一次使用 Redis 优化查询性能的实践
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,一次使用 Redis 优化查询性能的实践 应用背景 有一个应用需要上传一组ID到 ...