今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常,

如下如图1:第二,三,四列宽度发生变化,和代码中定义的宽度显示不一致,

图1(IE8):

图2(firefox):

代码如下:

 <table id="cont2">
<tbody>
<tr>
<td class="ct_t">
是否分包<font style="color: red;"> * </font>:
</td>
<td style="width:200px;">
<s:if test="agencyActionVO.activityVO.isSub.equals(\"1\")">是</s:if>
<s:else>否</s:else>
</td>
<td class="ct_t">
分包数量
<font style="color: red;"> * </font>:
</td>
<td>
<s:property value="agencyActionVO.activityVO.num" />
</td>
</tr>
<tr>
<td class="ct_t">
候选招标代理机构:
</td>
<td colspan="3">
<s:property value="agencyActionVO.activityVO.agencysName" />
</td>
</tr>
<tr>
<td class="ct_t">
回避及理由:
</td>
<td colspan="3">
<s:textarea name="agencyActionVO.activityVO.reason"
cssStyle="width:580px;height:100px;" id="reason" disabled="true"></s:textarea>
</td>
</tr> .......

最后查找资料才明白是 单元格的 colspan属性在ie8中影响了table的布局

标准参考

关于表格元素的自动布局

在 W3C CSS2.1 文档中,TABLE 元素在自动布局时的列的宽度计算规则是这样的:

  • 1. 计算每一个单元格的最小宽度 (MCW):经过格式化的内容可能会扩展到很多行,但是不会溢出单元格。如果某列的宽度设置值 (W) 大于 MCW,那么 W 就是单元格的最小宽度。另外,计算每个单元格的“最大”单元格宽度:不换行的将内容格式化,除非有显式的换行。
  • 2. 对每一列,根据只占该列的单元格的宽度确定最大最小宽度。最小值是其 MCW 最大的那个单元格的宽度(或列的 'width',取较大的)。最大值是取最大单元格宽度最大的单元格宽度(或列的 'width',取较大的)。
  • 3. 对于跨越多列的单元格,增加这些列的最小宽度,使它们的和至少跟单元格等宽。对于最大宽度也照样处理。如果可能的话,每个扩展到的列增加的宽度应大致相同。
  • 4. 对于每一个宽度值不是 auto 的列组,增加它所跨列的最小宽度,使宽度和至少跟列组的宽度等宽。

其中在第三步,提到了当表格中出现跨越多列的单元格时,它所跨列宽的计算规则:相应的增加所跨列的最小宽度。

虽然如此,但是对增加的方式没有明确说明,只是说,如果可能,所跨列增加的宽度应大致相同。

因此,对于跨列后的列宽计算方式,在各浏览器也就产生了差异。

关于 表格元素的自动布局 的详细信息,请参考 W3C CSS2.1 规范 17.5.2.2 Automatic table layout 中的内容。

问题描述

单元格的 colspan 属性在 IE 中可能影响 TABLE 元素的自动布局。

造成的影响

此问题严重时可能会导致页面布局混乱。

受影响的浏览器

IE6 IE7 IE8  

问题分析

请看以下测试用例。

分析以下代码:

<script type="text/javascript">
window.onload = function() {
function $(id) {
return document.getElementById(id);
} $("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +
"<br/>blue cell clientWidth : " + $("td2").clientWidth +
"<br/>gold cell clientWidth : " + $("td3").clientWidth;
}
</script>
<table id="T" style="color:white;" cellpadding="0" cellspacing="0">
<tr>
<td id="td1" style="background-color:red;">td1</td>
<td id="td2" style="background-color:blue; width:100px;">td2</td>
</tr>
<tr>
<td id="td3" style=" background-color:gold; width:300px;" colspan="2">td3</td>
</tr>
</table>
computed clientWidth:
<div id="info" style="border:1px dashed red; width:300px;"></div>
  • T 是一个自动布局的表格,含两行,两列。T 中『cellpadding="0" cellspacing="0"』的设置是为了去除单元格之间 padding 等的影响。
  • td2 的宽度是100px,大于其内容宽度;
  • td3 的宽度是300px,大于其内容宽度。

根据 CSS2.1 规范中的描述可知,td1 的最终宽度应为 200px。

这段代码在不同的浏览器环境中的表现:

IE Firefox Opera Safari Chrome

可见,在 IE 中,单元格的 td1td2 宽度被重新分配。

td2 的宽度设置 (width:100px;) 去掉后:

IE Firefox Opera Safari Chrome

解决方案

1. 设置 TABLE 的 'table-layout' 特性值为 fixed,使用固定布局的表格元素可避免此问题。

2. 单元格所跨过的列的宽度都设置成 auto。

IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局的更多相关文章

  1. c# WinForm开发 DataGridView控件的各种操作总结(单元格操作,属性设置)

    一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index ...

  2. html table中单元格自动换行

    table中单元格自动换行样式: table-layout: fixed; word-wrap: break-word;   table-layout 可能的值(IE不支持inherit属性) 值 描 ...

  3. 转:c# WinForm开发 DataGridView控件的各种操作总结(单元格操作,属性设置)

    一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index  ...

  4. python读取excel中单元格的内容返回的5种类型

    (1) 读取单个sheetname的内容. 此部分转自:https://www.cnblogs.com/xxiong1031/p/7069006.html python读取excel中单元格的内容返回 ...

  5. 关于POI 中单元格背景色设置(转)

    关于POI 中单元格背景色设置(转)   csdn 中找到了用Apache POI 实现单元格背景色的小例子 我用了JDK6 + POI 3.17 ,调试中报错 最终将 CellStyle.SOLID ...

  6. 关于QTableWidget中单元格拖拽实现

    无重写函数实现单元格拖拽 缺点:需要额外设置一个记录拖拽起始行的私有成员变量和拖拽列的初始QList数据成员. 优点:无需重构函数,对于QT中信号和槽的灵活运用 信号和槽 // signal void ...

  7. Excel单元格内容太多会覆盖遮住下一单元格范围

    Excel单元格内容太多会覆盖遮住下一单元格范围分步阅读 Excel中的单元格内容,有着不同的对齐方式.用户可根据自己的需求,在处理数据的时候,自行设置所需要的对齐方式. 当您在处理数据的时候,如果设 ...

  8. Excel 2013中单元格添加下拉列表的方法

    使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...

  9. 【原创】有关Silverlight中“DataGrid中单元格动态绑定ComboBox单击时数据项莫名被清除 ”的解决方案及思路。

    今天上班遇到一个很古怪的问题,搞了半天愣是没找到原因.是这样的,在Datagrid中有绑定一个ComboBox列,其不包含在 model数据中,而是单独在LoadingRow事件中去 从数据库拿数据绑 ...

随机推荐

  1. .Net开源微型ORM框架测评

    什么是ORM? 对象关系映射(英语:Object Relation Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间 ...

  2. hibernate通过xml配置文件实现表与实体的映射

    这里讨论的是一对多的关系 在做公交卡系统,会涉及到两张表,忽略两种表的作用,只关心他们之间的关系 : 卡规格表和卡类表,一种卡规格会对应多个卡类 实体类: /** * 卡类型表的实体 */ publi ...

  3. [Google Guava]字符串处理:连接器、拆分器、字符匹配器

    一.连接器[Joiner] 二.拆分器[Splitter] 三.字符匹配器[CharMatcher] 四.字符集[Charsets] Charsets:针对所有Java平台都要保证支持的六种字符集提供 ...

  4. GRE与Vxlan网络详解

    1. GRE 1.1 概念 GRE全称是Generic Routing Encapsulation,是一种协议封装的格式,具体格式内容见:https://tools.ietf.org/html/rfc ...

  5. vue.js之绑定class和style

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></di ...

  6. jquery里互为逆过程的方法

    jquery里互为逆过程的方法reverse 在jquery里,有不少互为逆过程的方法,如parent()与children(),parents()与find(),first()和last()等,这些 ...

  7. ORB-SLAM(二)性能

    ORB-SLAM程序提供了运行Monocular.Stereo和RGBD数据的程序.编译成功后,可以通过运行TUM的标准数据来验证程序是否成功.如果想自己测试一些数据,可以通过OpenCV提供的接口调 ...

  8. a版本冲刺第三天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 看了构建之法的第二章和十三章 完成学习Java ...

  9. a冲刺总结随笔

    Alpha版本计划完成一般的便签功能:   预期项目 实际进展 首页瀑布流方块布局 1 按新旧顺序排列 1 增加记录 1 编辑文字信息 1 标记喜爱 0 删除文字信息 1 手动添加分类 0 反馈页面 ...

  10. java如何跳出多重嵌套循环

    Java里的break能跳出循环但是只能跳出一个,goto这个在java中也只是被当作关键是,没有任何作用 要做到跳出多重嵌套循环,可以用此方法 在循环体开头设置一个标志位,设置一个标记,然后使用带此 ...