[转帖]table-layout:fixed导致单元格宽度不受控制的问题
来源:互联网 发布:魔兽数据库下载 编辑:程序博客网 时间:2024/05/06 14:55
网页上的表格如下图所示:
网页代码如下:
<style type="text/css">table{border-collapse:collapse;/*table-layout:fixed;*/}table,table td{border-color:blue;}</style><table width="400" border="1" style="border-color:blue;border-collapse:collapse"><tr><td width="50%">1</td><td colspan="2">2</td></tr><tr><td>3</td><td width="10%">4</td><td width="40%">5</td></tr><tr><td colspan="3">http://wallimn.iteye.com</td></tr></table>
如果把table-layout:fixed的注释去掉,表格就会变成如下样子(注意看,4与5变成等宽的了):
这是什么原因呢?需要了解一下fixed布局模型的工作步骤:
1.width属性值不是auto的所有列元素会根据width值设置该列的宽度.
2.如果一个列的宽度为auto---不过,表首行中位于该列的单元格width不是auto---则根据该单元格宽度设置此列的宽度.如果这个单元格跨多列,则宽度在这些列上平均分配.
3.在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等.此时,表的宽度设置为表的width值或列宽度之和(取其中较大者).如果表度度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上.
.........................................
这种方法的速度很快,因为所有列宽都由表的第一行定义.首行后所有行中的单元格都根据首行所定义的列宽确定大小.后面这些行中的单元格不会改变列宽.这意味着为这些单元格指定的width值都会被忽略.
2010-09-13
这个问题比较好解决,可以把表格的第一行行高设置为1px,专门用来分配列宽。
tr.first{
height:1px;
font-size:1px;
line-height:1px;
}
然后把第一行加上class="first"。
当然,也可以通过不使用fixed属性来解决。
转帖人PS:这个问题不光会导致同一个table的列宽度无法控制,同样也会导致两个table的单元格宽度不一致,比如一个table 四列,每一列25%,另一个table也是一样,但是它第一行colspan了第二列到第四列,那么两个table的第一列宽度就不一致了(使用table-layout:fixed)。
- [转帖]table-layout:fixed导致单元格宽度不受控制的问题
- table-layout:fixed使单元格宽度失效解决方法
- 解决表格设置table-layout:fixed后单元格宽度设置无效的方法
- 解决设置table-layout:fixed后无法设置宽度的问题
- 不受控制的 position-fixed
- 【HTML】【CSS】表格设置了table-layout:fixed后第一行合并单元格其下单元格宽度设置不起作用的解决方法
- 【HTML】【CSS】表格设置了table-layout:fixed后第一行合并单元格其下单元格宽度设置不起作用的解决方法
- table的宽度,单元格内换行问题
- Table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table-layout的fixed属性
- HTML Table Tr自动换行、宽度自适应:table-layout:fixed 属性的解说
- 解决table设置了table-layout:fixed后单,元格宽度设置无效的方法
- table-layout: fixed 实现表格列宽可控制
- 有关表格table-layout:fixed属性的问题
- php Smarty高级 数据对象
- 【不需要借助第三方软件如何让电脑速度变快】
- 国学翻翻看:我第一个上架APP STORE的应用
- HttpClient的超时用法小记
- Java中的集合类
- [转帖]table-layout:fixed导致单元格宽度不受控制的问题
- SQL Server2000安装过程中"选择许可模式"说明
- 关于HTML标签属性值没有引号的问题
- Linux学习之道:处理Apache日志的Bash脚本
- linux arm的高端内存映射(1) vmalloc
- Android display架构分析-SW架构分析(1-8)
- 解决ERROR 2003 (HY000): Can't connect to MySQL server on "host" (111)
- hdu-1249-三角形
- cocos2d-2.0-x-2.0.4安装教程+快捷安装补丁(官方源码包改进建议)