Разбитый макет таблицы в IE8 со встроенными таблицами в другой таблице - PullRequest
Новая
       21

Разбитый макет таблицы в IE8 со встроенными таблицами в другой таблице

2 голосов
/ 07 марта 2011

Здесь у меня есть таблица со встроенными вложенными таблицами.Я искал пару часов, но не нашел причину проблемы.Проблема в том, что некоторые столбцы в основной таблице имеют фиксированную ширину с помощью стиля CSS, и об этом заботится только Firefox.IE8 в стандартном режиме отображает фиксированные столбцы от широкого до широкого, а в режиме совместимости это хуже всего.Вот фрагмент кода: 

<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>
[...]

Когда я уменьшаю ширину третьего столбца в подтаблицах с 400 до 100 пикселей или менее, все в порядке, но это не мое намерение.Вот несколько скриншотов, как эта таблица отображается:

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 Ответ

2 голосов
/ 07 марта 2011

Забавно, мой второй вопрос здесь и сам нашел решение :) Добавление css "table-layout: fixed;" на главный стол сделал свое дело!

Ошибка ширины ячейки таблицы Internet Explorer 8 с установленным colspan

...