【分享】IE中,单元格的colspan属性可能影响TABLE元素的自动布局

WebAdvocate 2010-08-03 04:43:05
加精
前些日子,发现有同学被表格布局的问题困扰。主要问题是单元格上设置了 colspan属性,有的 td上没设置宽度,导致此 td 计算后的宽度出现浏览器兼容性问题。

代码
具体的例子:
<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是一个表格,它的 ”table-layout” 没有设置,这时,会采用默认值’auto’,及自动布局。
表格含两行,两列。其中『cellpadding="0" cellspacing="0"』的设置是为了去除单元格之间padding等对布局的影响。
td2的宽度是100px,td3的宽度是300px,均大于其内容宽度;此设置为了排除内容对宽度的影响,因为在自动布局下,单元格内容大于其设置宽度时,会将单元格撑开。

现在的问题是,究竟 td1 最终的宽度应该是多少?应该是200px吗?

差异
将页面在浏览器中测试一下,在各个浏览器中的表现有所差异:
在 IE 中:

Firefox/Chrome/Safari 中:

在解释这个差异之前,先来看一下标准里是怎么说的。

自动布局表格的宽度计算
在W3C CSS2.1文档中,TABLE元素在自动布局时列的宽度计算规则第3条规定了出现跨越多列单元格是如何处理:
对于跨越多列的单元格,增加这些列的最小宽度,使它们的和至少跟单元格等宽。对于最大宽度也照样处理。如果可能的话,每个扩展到的列增加的宽度应大致相同。

可见,当表格中出现跨越多列的单元格时,它所跨列宽的计算规则:相应的增加所跨列的最小宽度。

虽然如此,但是对增加的方式没有明确说明,只是说,如果可能,所跨列增加的宽度应大致相同。因此,造成了跨列后的列宽计算方式在各浏览器中产生差异。

参考资料,W3C CSS2.1:http://www.w3.org/TR/CSS2/tables.html#auto-table-layout

没有结果的结果
回到刚才的问题上,IE和其他浏览器的计算方案有所差异,其他浏览器都是用td3的宽度减去td2的宽度。IE不知是如何算的宽度值。

怎样解决
只要不让HTML结构触发以上的兼容性问题即可。设置TABLE的“table-layout”特性值为“fixed”,使用固定布局的表格,但这种布局下,宽度不会自适应内容的大小。
也可以将单元格所跨过的列的宽度都设置成‘auto’或者不设置。如此也能有效的规避这个错误。

更多兼容性问题:【分享】浏览器兼容性问题目录
...全文
4552 点赞 收藏 42
写回复
42 条回复
切换为时间正序
请发表友善的回复…
发表回复
wangzhong418522 2011-10-13
我也遇到這個問題了,只是在firefox中出現,其他瀏覽器都没問題,於是我用了fiexd,可是用fiexd反而更誇張的變形了,我表格這樣的
<table border="0" width="710px" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td style="float: right;" colspan="2">
<img border="0" src="images/SW05_IMG_0.jpg" width="710px" height="80" alt="" />
</td>
</tr>
<tr>
<td style="float: right" colspan="2">
<table border="0" width="710" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td height="45">
<font size="4" face="微軟正黑體" color="#663300">尚旺人力派遣管理優勢</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<ul style="line-height: 150%;">
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>專人隨同駐廠,現場即時協調</b></font></span>
</li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>定時、隨時員工訪談,問題輔導</b></font><font
face="微軟正黑體" color="#666666"><br />
尚旺特別配置專員一起至企業工作,就近輔導處理員工任何問題,提高員工工作穩定度為企業降低管理風險,強化工作品質。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>離職追蹤訪談,客觀紀錄檢討</b></font><font
face="微軟正黑體" color="#666666"><br />
當員工離職,尚旺將進行離職員工訪談,詳實記錄員工工作狀況與離職原因,提供企業做為日後管理分析之用。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>管理網站平台,三方即時互動回報</b></font><font
face="微軟正黑體" color="#666666"><br />
企業各部門主管與員工可以隨時上網進入專屬網頁反應各式問題,尚旺即時處裡溝通回報。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>內部管理軟體,人員控管調度靈活</b></font><font
face="微軟正黑體" color="#666666"><br />
尚旺管理網站功能強大,包括人員到/離職、勞健保加退、薪資發放、訪談紀錄及宿舍分配等,都能再尚旺管理系統中一貫作業。</font></span> </li>
<li><span style="font-size: 11pt"><font face="微軟正黑體" color="#FF6600"><b>專業的優勢</b></font><font
face="微軟正黑體" color="#666666"><br />
作業管理獲得國際ISO9001認證。</font></span> </li>
</ul>
</td>
<td style="float: right">
<img border="0" src="images/SW06_IMG_0.jpg" width="350px" height="392" alt="" />
</td>
</tr>
<tr>
<td style="float: right" colspan="2">
<p style="line-height: 150%" align="center">
</td>
</tr>
</table>

在firefox中出現的效果是
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td></td></tr>
</table>
最下面一個是tr是第一個跟上面的td在同一條垂直線上,第二個td則突出在外面!請問我這個是什麼問題啊?
回复
liangshangjunzi 2010-08-23
学习了
回复
Jamy325 2010-08-09
很好很强大。。
回复
binghe2050 2010-08-09
学习了!!!!!!!!!!
回复
iseebaby 2010-08-09
很不错。。学习了。。
回复
GlyphVectory 2010-08-07
lz: <td id="td3" style=" background-color:gold; width:300px;" colspan="2">td3</td>
为什么还要:定义宽度?
你的colspan是承接上一个tr中的所有td,你把width去掉就OK了
回复
WebAdvocate 2010-08-06
[Quote=引用 32 楼 tizll521 的回复:]

最近表格用的比较多 复杂点的布局 宽度总会出现不可预期的错误 宽度问题一直困扰着我
郁闷哪
[/Quote]建议少用 TABLE 做布局 比较难控制 可读性也不好 改起来也麻烦
回复
tizll521 2010-08-06
最近表格用的比较多 复杂点的布局 宽度总会出现不可预期的错误 宽度问题一直困扰着我
郁闷哪
回复
yinhe0376 2010-08-06
新人报道,学习中
回复
lisa022 2010-08-05
很好的东东
回复
skyaspnet 2010-08-05
很不错。。。
回复
xf6133535 2010-08-05
都不懂·很难耶·
回复
sumengfeng 2010-08-05
我竟然没有发现这样的问题
回复
myhope88 2010-08-05
多谢楼主分享
回复
star13_hit 2010-08-05
Mark up
回复
智星 2010-08-05
好久没有写页面代码了.学习一下.
回复
aierda 2010-08-04
抢沙发 good
回复
WebAdvocate 2010-08-04
[Quote=引用 10 楼 xiaopoy 的回复:]

table中的td,乱设width和colspan,可能导致超出行限制,而且这样情况的行长度无法用其他的方法控制,fixed我记得是起不了作用的,LZ确定colspan导致的IE乱塞表格列可以用fixed解决?
[/Quote]你说的情况,是另一个IE的问题,它的内容可以把包含块的宽度撑开。
见:【分享】小心,IE中width/height的设定值可能被其内容撑大
只要保证页面运行在标准模式下就行,只有IE6里还有点儿问题。
回复
bingdongcaih 2010-08-04
good good good good
回复
xiaopoy 2010-08-04
table中的td,乱设width和colspan,可能导致超出行限制,而且这样情况的行长度无法用其他的方法控制,fixed我记得是起不了作用的,LZ确定colspan导致的IE乱塞表格列可以用fixed解决?
回复
发动态
发帖子
跨浏览器开发
创建于2010-06-28

5004

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
申请成为版主
社区公告
暂无公告