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


在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。如果把表格的合并行去掉,又能正常显示。

原因:table-layout: fixed 的表格,各列宽度由第一行决定,后面指定的宽度会被忽略。你第一行合并了,所以各列宽度均分了。

解决方法一:

在tbody前加

复制代码
代码如下:

<col style="width: 60%" />
<col style="width: 20%" />
<col style="width: 20%" />

解决方法二:

设置一个隐藏的行来规定宽度:

复制代码
代码如下:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
<tr style="display:none">
<td style="width:100px"></td>
<td style="width:80px"></td>
<td style="width:20px"></td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>

这个方法,在IE6,IE7,IE8中都可以正确地显示,但在非IE中,是没起作用的。下面给出另外一种方法:

复制代码
代码如下:

<style>
td{border:1px solid red;}
</style>
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1">
<tr style="height:0;">
<th style="width:100px"></th>
<th style="width:80px"></th>
<th style="width:20px"></th>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>



相关阅读:
ubuntu16.04怎么远程远程登录linux系统?
初识NoSQL NoSql数据库入门 NoSql数据库基础知识
使用正则Regex来移除网页的EnableViewState实现思路及代码
Android中RecyclerView点击Item设置事件
ASP.NET连接sql2008数据库的实现代码
Android中自定义标题栏样式的两种方法
Java调用浏览器打开网页完整实例
Android组件之DrawerLayout实现抽屉菜单
iOS动画实现雨花与樱花特效
【HTML 元素】嵌入图像的实现方法
简单谈谈Java中String类型的参数传递问题
JS获取及验证开始结束日期的方法
FireFox下文本框/域百分比自适应数值padding显示bug解决方案
禁止iPhone Safari video标签视频自动全屏的办法
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4