[HTML/CSS] Nested table probleem - Softwareontwikkeling

zaterdag 27 december 2008 22:17

Acties:

0 Henk 'm!

Topicstarter

Ik probeer een grid te ontwikkelen, maar loop tegen een probleem aan zodra ik een subgrid probeer toe te voegen. Het probleem is dat de kolommen van de hoofdtabel niet langer de juiste breedte zijn.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
        <TITLE></TITLE>

        <style type="text/css">

        body {
            PADDING: 0px 0px 0px 0px;
            FONT-SIZE: 11px;
            MARGIN: 0px 0px 0px 0px; 
            WIDTH: 100%;  
            FONT-FAMILY: Verdana; 
            HEIGHT: 100%;
        }

        .grid {
            FONT-SIZE: 11px;
            WIDTH: 100%;
            FONT-FAMILY: Verdana;
        }

        .header {
            PADDING-RIGHT: 3px;
            PADDING-LEFT: 3px;
            PADDING-BOTTOM: 0px;
            COLOR: #666666;
            PADDING-TOP: 0px;
            HEIGHT: 20px
        }

        .content {
            PADDING-RIGHT: 3px;
            PADDING-LEFT: 3px;
            PADDING-BOTTOM: 0px;
            CURSOR: pointer;
            COLOR: #000000;
            PADDING-TOP: 0px;
            HEIGHT: 20px
        }

        </style>
    </HEAD>

    <BODY>
        <TABLE class="grid" cellspacing="0" border="1">
            <TR>
                <TD class="header" style="width: 12px;">&nbsp;</TD>
                <TD class="header" style="width: 100px;">Code</TD>
                <TD class="header" style="width: auto;">Omschrijving</TD>
                <TD class="header" style="width: 100px;">Totaal</TD>
            </TR>
            
            <TR>
                <TD class="content" style="width: 12px;">&nbsp;</TD>
                <TD class="content" style="width: 100px;">AA</TD>
                <TD class="content" style="width: auto;">Korte omschrijving</TD>
                <TD class="content" style="width: 100px;">0</TD>
            </TR>
            
            <TR>
                <TD style="width: 12px">&nbsp;</TD>
                <TD colspan="3">
                    <TABLE class="grid" cellspacing="0" border="1">
                        <TR>
                            <TD class="header" style="width: 12px;">&nbsp;</TD>
                            <TD class="header" style="width: 100px;">Code</TD>
                            <TD class="header" style="width: auto;">Omschrijving</TD>
                            <TD class="header" style="width: 100px;">Totaal</TD>
                        </TR>
              
                        <TR>
                            <TD class="content" style="width: 12px;">&nbsp;</TD>
                            <TD class="content" style="width: 100px;">BB</TD>
                            <TD class="content" style="width: auto;">Langere omschrijving</TD>
                            <TD class="content" style="width: 100px;">0</TD>
                        </TR>
                    </TABLE>
                </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>

Wat nog het allervreemdst is is dat wanneer je de tekst 'Langere omschrijving' vervangt met de tekst 'test' dan klopt de layout wel. Overigens gaat het alleen fout in Internet Explorer en niet in FireFox, Chrome en Opera.

Het lijkt mij een bug in Internet Explorer.. Is er iemand die hier een oplossing ofwel een work-around voor heeft?

zondag 28 december 2008 03:43

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

table-layout:fixed gebruiken

Intentionally left blank

zondag 28 december 2008 12:00

Acties:

0 Henk 'm!

Kun

Topicstarter

Fantastisch! Bedankt!

zondag 28 december 2008 14:51

Acties:

0 Henk 'm!

Kun

Topicstarter

Toch nog 1 probleempje. Als ik nu een regel onderaan toevoeg (een footer) met 1 cell met de colspan van het aantal kolommen dan worden in FireFox, Chrome en Opera de kolommen allemaal even breed. In Internet Explorer gaat het dan uiteraard wel goed..

Is er misschien nog een andere oplossing dan deze table-layout? Of wellicht een oplossing voor dit nieuwe probleem?

Dus de volgende HTML code heb ik toegevoegd aan de buitenste tabel:

HTML:

1
2
3

<TR> 
    <TD class="footer" colspan="4">footer...</TD>
</TR>

[ Voor 17% gewijzigd door Kun op 28-12-2008 14:55 ]

zondag 28 december 2008 15:06

Acties:

0 Henk 'm!

harrald

beter lezen

[ Voor 98% gewijzigd door harrald op 28-12-2008 15:07 ]

zondag 28 december 2008 15:34

Acties:

0 Henk 'm!

Kun

Topicstarter

Laat maar.. Ik zat onzin uit te kramen. Het ging niet fout bij de footer, maar als ik een header toevoeg met een colspan van 4. De css documentatie zegt ook dat bij de table-layout fixed de styles van de eerste regel worden gebruikt. Ik heb het probleem dan ook opgelost door altijd eerst een onzichtbare regel te plaatsen die dezelfde indeling heeft als de kolommen. Daardoor heb ik geen probleem meer met de headers en footers.

Nogmaals bedankt. Kan ik eindelijk beginnen te genieten van mijn weekend

zondag 28 december 2008 16:49

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Daar kan je dus ook een <colgroup> voor gebruiken

Intentionally left blank