IE8中的表格布局破坏，在另一个表格中嵌入了表格 [英] Broken table layout in IE8 with embedded tables within another table
本文介绍了IE8中的表格布局破坏，在另一个表格中嵌入了表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是一段代码片段：
< table>
< thead>< tr>
< th style =width：80px;>< div style =float：right; class =links>< a href =/ link？s = object_id-asctitle =Aufsteigend sortieren>< span class =imgarrupactive>& nbsp;< / span>< ; / a>< a href =/ link？s = object_id-desctitle =Absteigend sortieren>< span class =imgarrdown>& nbsp;< / span>< / a> ;< / DIV> OBJEKT-ID< /第>
< th style =width：50px;>< div style =float：right; class =links>< a href =/ link？s = zipcode-asctitle =Aufsteigend sortieren>< span class =imgarrup>& nbsp;< / span>< ; / a>< a href =/ link？s = zipcode-desctitle =Absteigend sortieren>< span class =imgarrdown>& nbsp;< / span>< / a> ;< / DIV> PLZ< /第>
< th>< div style =float：right; class =links>< a href =/ link？s = city-asctitle =Aufsteigend sortieren>< span class =imgarrup>& nbsp;< / span>< ; / a>< a href =/ link？s = city-desctitle =Absteigend sortieren>< span class =imgarrdown>& nbsp;< / span>< / a> ;< / DIV>的Ort< /第>
< th>< div style =float：right; class =links>< a href =/ link？s = street-asctitle =Aufsteigend sortieren>< span class =imgarrup>& nbsp;< / span>< ; / a>< a href =/ link？s = street-desctitle =Absteigend sortieren>< span class =imgarrdown>& nbsp;< / span>< / a> ;< / DIV>大街< /第>
< th style =width：60px;>< div style =float：right; class =links>< a href =/ link？s = number-asctitle =Aufsteigend sortieren>< span class =imgarrup>& nbsp;< / span>< ; / a>< a href =/ link？s = number-desctitle =Absteigend sortieren>< span class =imgarrdown>& nbsp;< / span>< / a> ;< / DIV> HNR< /第>
< th style =width：57px;> Aktion< / th>
< / tr>< / thead>
< tbody>
< tr class =tr_color_switch>< td style =text-align：center;> 000< / td>< td style =text-align：center;> 111< ; / td>< td> 222< td>< td> 333< td>< td> 444< / td>< td>< div class =linkonclick =contactHistoryPrint（this， 'ab 01.09.2010'）; < / div>< / td><
< tr class =tr_color_switch>< td colspan =6style =padding：0;>
< table class =subtable>
< thead>< tr>< th style =width：80px;> Selektionsdatum< th>< th style =width：80px;> Versanddatum< / th>< th style =width：400px;> Aktion< / th>< / tr>< / thead>
< tbody>
< tr>< td colspan =3>< i> keine Daten vorhanden< / i>< / td>< / tr>
< / tbody>
< / table>
< div class =clear>< / div>
< / td>< / tr>
< tr class =tr_color_switch>< td style =text-align：center;> aaa< / td>< td style =text-align：center;> bbb< ; / td>< td> ccc< / td>< td> ddd< / td>< td> eee< / td>< td>< div class =linkonclick =contactHistoryPrint（this， 'ab 01.09.2010'）; < / div>< / td><
< tr class =tr_color_switch>< td colspan =6style =padding：0;>
< table class =subtable>
< thead>< tr>< th style =width：80px;> Selektionsdatum< th>< th style =width：80px;> Versanddatum< / th>< th style =width：400px;> Aktion< / th>< / tr>< / thead>
< tbody>
< tr>< td colspan =3>< i> keine Daten vorhanden< / i>< / td>< / tr>
< / tbody>
< / table>
< div class =clear>< / div>
< / td>< / tr>
[...]
当我减小子的第三列的宽度从400px到100px或更少的表格，一切都很好，但这不是我的意图。下面是一些截图如何显示此表格：
文件类型为：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
任何人都可以帮忙吗？
解决方案
有趣的是，我的第二个问题在这里，我自己找到了解决方案:)添加csstable-layout：fixed;到主表做了诀窍！
设置了colspan的Internet Explorer 8表格单元宽度错误
Here I've a table with embedded sub-tables. I've been looking now for a couple of hours, but didn't found the reason for the problem. The problem is, that some of the columns in the main table have fixed width via css style and only Firefox cares about that. IE8 in standard mode displays the fixed cols a bit to wide and in compatibility mode it's worst. Here's a code snippet:
<table>
<thead><tr>
<th style="width:80px;"><div style="float: right;" class="links"><a href="/link?s=object_id-asc" title="Aufsteigend sortieren"><span class="imgarrupactive"> </span></a><a href="/link?s=object_id-desc" title="Absteigend sortieren"><span class="imgarrdown"> </span></a></div>Objekt-ID</th>
<th style="width:50px;"><div style="float: right;" class="links"><a href="/link?s=zipcode-asc" title="Aufsteigend sortieren"><span class="imgarrup"> </span></a><a href="/link?s=zipcode-desc" title="Absteigend sortieren"><span class="imgarrdown"> </span></a></div>PLZ</th>
<th><div style="float: right;" class="links"><a href="/link?s=city-asc" title="Aufsteigend sortieren"><span class="imgarrup"> </span></a><a href="/link?s=city-desc" title="Absteigend sortieren"><span class="imgarrdown"> </span></a></div>Ort</th>
<th><div style="float: right;" class="links"><a href="/link?s=street-asc" title="Aufsteigend sortieren"><span class="imgarrup"> </span></a><a href="/link?s=street-desc" title="Absteigend sortieren"><span class="imgarrdown"> </span></a></div>Straße</th>
<th style="width:60px;"><div style="float: right;" class="links"><a href="/link?s=number-asc" title="Aufsteigend sortieren"><span class="imgarrup"> </span></a><a href="/link?s=number-desc" title="Absteigend sortieren"><span class="imgarrdown"> </span></a></div>HNR</th>
<th style="width:57px;">Aktion</th>
</tr></thead>
<tbody>
<tr class="tr_color_switch"><td style="text-align:center;">000</td><td style="text-align:center;">111</td><td>222</td><td>333</td><td>444</td><td><div class="link" onclick="contactHistoryPrint(this,'ab 01.09.2010');" title="Druckversion"><span class="imgtext"> </span></div></td></tr>
<tr class="tr_color_switch"><td colspan="6" style="padding: 0;">
<table class="subtable">
<thead><tr><th style="width:80px;">Selektionsdatum</th><th style="width:80px;">Versanddatum</th><th style="width:400px;">Aktion</th></tr></thead>
<tbody>
<tr><td colspan="3"><i>keine Daten vorhanden</i></td></tr>
</tbody>
</table>
<div class="clear"></div>
</td></tr>
<tr class="tr_color_switch"><td style="text-align:center;">aaa</td><td style="text-align:center;">bbb</td><td>ccc</td><td>ddd</td><td>eee</td><td><div class="link" onclick="contactHistoryPrint(this,'ab 01.09.2010');" title="Druckversion"><span class="imgtext"> </span></div></td></tr>
<tr class="tr_color_switch"><td colspan="6" style="padding: 0;">
<table class="subtable">
<thead><tr><th style="width:80px;">Selektionsdatum</th><th style="width:80px;">Versanddatum</th><th style="width:400px;">Aktion</th></tr></thead>
<tbody>
<tr><td colspan="3"><i>keine Daten vorhanden</i></td></tr>
</tbody>
</table>
<div class="clear"></div>
</td></tr>
[...]
When I reduce the width of the third column in the sub tables from 400px to 100px or less, all is fine, but that's not my intention. Here are some screenshots how this table is displayed:
Document type is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Can anyone help?
解决方案
Funny, my second question here and found the solution on my own :) Adding css "table-layout: fixed;" to the main table did the trick!
Internet Explorer 8 table cell width bug with colspan set
这篇关于IE8中的表格布局破坏，在另一个表格中嵌入了表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
