IE9表格的布局固定合并单元格不尊重
我发现这个话题,我的是相关但不一样的:IE9表格的布局固定合并单元格不尊重
Table rendering with cols and colspan on tds in IE9
我遇到的问题是,第二列跨度= 2在我的表是不是被IE9阅读,有趣的是,它可以在IE7和IE8中找到,但不能在IE9中找到。也许我已经做了一些完全错误的所以在这里,它是:
HTML:
<table id="test">
<tbody>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
CSS:
#test {
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
#test td {
position: relative;
background-color: #cccccc;
box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
padding: 10px;
}
的jsfiddle:http://jsfiddle.net/DUCPp/1/
什么是应该发生:
什么IE9 g ives me:
我确信这是一个IE9的错误,但我一直没有能够在谷歌上找到它(也许我没有搜索正确的关键字?)。任何解决方案或错误报告的链接将不胜感激!
更新: 我在第二个colspan = 2列后添加了一个额外的列,它将正确呈现。我推断,如果连续最后一列的colspan> 1,那么它将只呈现为colspan = 1。
有关修复的任何想法?我现在几乎肯定这是一个IE9错误< _ <
您似乎没有为列定义任何固定宽度。你应该使用类似这样的<tbody>
前:
<col span="6" style="width:16%;" />
我已经尝试过定义列,但无济于事......查看我上面发布的解决方案是否正常:/ – Populus 2013-03-12 19:30:16
嘿... ... IE9
发现了一个 “修复” ...的想法来自:Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?
基本上我不得不在它添加一个空行空单元格的正确#:
<table id="test">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
不漂亮......我需要去除的细胞填充,以便它不显示。唉...
的jsfiddle:http://jsfiddle.net/DUCPp/5/
您可以离开填充,然后选择第一个'tr'并删除它们的填充:#test tr:first-child td {padding:0}' – 2013-03-12 19:30:29
我认为这是IE中的一个错误(你知道些什么)。这个小提琴也失败了http://jsfiddle.net/DUCPp/1/确实很奇怪的行为。 – Bart 2013-03-12 19:35:02
你想要做的头一组列的宽度,通过TH,因为这是浏览器将使用什么来确定表的后续行宽度和列什么。
看一看下面的例子:
<table>
<thead>
<tr style="height: 0px;">
<th style="width: 110px; height:0px;"></th>
<th style="width: 160px; height: 0px;"></th>
<th style="width: 210px; height: 0px;"></th>
<th style="width: 110px; height: 0px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Hello</td>
<td>There</td>
</tr>
</tbody>
</table>
我通过我的HTML代码开始加入DOCTYPE声明确定的类似问题。请参阅http://www.w3.org/QA/2002/04/valid-dtd-list.html 我添加的特定声明用于版本“HTML 4.01过渡”。 即放置在初始标签之前。
希望这有助于?
请确保您正在运行IE9模式:x因为它在IE7和IE8中正常工作... – Populus 2013-03-12 19:36:04
您的修改是为我添加额外的列。 – 2013-12-09 16:37:55