IE8中的表格布局损坏,其他表格中嵌入了表格

时间:2011-03-07 06:35:10

标签: html internet-explorer-8 html-table tablelayout

这里我有一个包含嵌入式子表的表。我一直在寻找几个小时,但没有找到问题的原因。问题是,主表中的某些列通过css样式具有固定宽度,只有Firefox关心这一点。 IE8在标准模式下显示固定的cols到一个宽点,在兼容模式下它是最差的。 这是一段代码:

<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">&nbsp;</span></a><a href="/link?s=object_id-desc" title="Absteigend sortieren"><span class="imgarrdown">&nbsp;</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">&nbsp;</span></a><a href="/link?s=zipcode-desc" title="Absteigend sortieren"><span class="imgarrdown">&nbsp;</span></a></div>PLZ</th>
        <th><div style="float: right;" class="links"><a href="/link?s=city-asc" title="Aufsteigend sortieren"><span class="imgarrup">&nbsp;</span></a><a href="/link?s=city-desc" title="Absteigend sortieren"><span class="imgarrdown">&nbsp;</span></a></div>Ort</th>
        <th><div style="float: right;" class="links"><a href="/link?s=street-asc" title="Aufsteigend sortieren"><span class="imgarrup">&nbsp;</span></a><a href="/link?s=street-desc" title="Absteigend sortieren"><span class="imgarrdown">&nbsp;</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">&nbsp;</span></a><a href="/link?s=number-desc" title="Absteigend sortieren"><span class="imgarrdown">&nbsp;</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">&nbsp;</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">&nbsp;</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>
[...]

当我将子表中第三列的宽度从400px减小到100px或更低时,一切都很好,但这不是我的意图。以下是该表格显示的截图:

LINK

文件类型是:

<!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">

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:2)

好笑,我的第二个问题在这里找到了我自己的解决方案:)添加css“table-layout:fixed;”到主表做了伎俩!

Internet Explorer 8 table cell width bug with colspan set