[HTML] Rowspan en cell height - Softwareontwikkeling

vrijdag 9 januari 2004 09:30

Acties:

will code for food

Topicstarter

Aargh het is om gek van te worden.. Zodra ik een rowspan attribute ga gebruiken kan ik de hoogte van bepaalde cellen niet meer zetten..

(Ik heb de border van de table even aangezet om wat meer duidelijkheid te scheppen)

Rood gemarkeerd:

Een cell die voor verticale opvulling moet zorgen, deze heb ik op height="100%" gezet maar hij weigert deze hoogte aan te nemen.. De rijen erboven (geel gemarkeerd) zijn nl. dynamisch in aantal. Ik mag de opvulcel dus geen vaste (px) grootte geven.

Blauw gemarkeerd:

Een cell met een rowspan van het aantal rijen links van deze cell +1 (+1 voor de opvulcell)

Geel gemarkeerd:

Een variabel aantal rijen, die stuk voor stuk eigenlijk rond de 16px hoog zou moeten zijn. Wanneer ik de height van deze rijen op een vast aantal pixels zet via height=.. of (style)height=..px (Wat ook een oplossing zou moeten zijn) weigert dit wederom correct weergegeven te worden.

Mijn vraag is: Hoe krijg ik het in godsnaam voor elkaar dat de cell die de boel moet opvullen dat ook daadwerkelijk doet, het probleem dat nl. optreedt is wanneer er meerdere rijen boven de opvulcell zitten (Bij persoonlijke diensten, daar kan bijvoorbeeld nog telefonische diensten en meerdere bijkomen) deze rijen niet een minimale grootte hebben en deze dus niet netjes 'tegen elkaar' aan staan.

Afbeeldingslocatie: http://www.xs4all.nl/~boutd/rowspan.jpg

Afbeeldingslocatie: http://www.xs4all.nl/~boutd/rowspan.jpg

code:

    for (int i=0;i<XmlServicePaymentsSpec.Count;i++)
    {
        XmlNode XmlServicePaymentSpec = XmlServicePaymentsSpec[i];
%>
        <TR class="<% Response.Write((i==0) ? "summarystart" : "summary"); %>">
            <TD valign="top" colspan="4"><% Response.Write(Server.HtmlEncode(XmlNodeAttribute.GetString(XmlServicePaymentSpec, "cServiceType", ""))); %> diensten:</TD>
            <TD valign="top">&nbsp;<% Response.Write(Server.HtmlEncode(timeToString(XmlNodeAttribute.GetInt(XmlServicePaymentSpec, "iDuration", 0)))); %></TD>
            <TD valign="top">&nbsp;<% Response.Write(Server.HtmlEncode(timeToString(XmlNodeAttribute.GetInt(XmlServicePaymentSpec, "iWaitTime", 0)))); %></TD>
            <TD valign="top">&nbsp;<% Response.Write(Server.HtmlEncode(timeToString(XmlNodeAttribute.GetInt(XmlServicePaymentSpec, "iTravelTime", 0)))); %></TD>
            <TD valign="top">&nbsp;<% Response.Write(Server.HtmlEncode(timeToString(XmlNodeAttribute.GetInt(XmlServicePaymentSpec, "iStandbyTime", 0)))); %></TD>
            <TD valign="top">&nbsp;</TD>
            <TD valign="top">&nbsp;<% Response.Write(Server.HtmlEncode(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentSpec, "mService", "")))); %></TD>
<%
        if (i==0)
        {
%>
            <TD valign="top" colspan="4" style="border: 2px solid black" rowspan="<% Response.Write(XmlServicePaymentsSpec.Count+1); %>">
                <TABLE class="summarytable" border="0" width="100%" cellspacing="0" cellpadding="0">
                <TR class="data">
                    <TD class="left">Telefoon kosten:</TD>
                    <TD class="right"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotalTelephoneExpense", ""), "0,00")); %></TD>
                </TR>
                <TR class="data">
                    <TD class="left">Reiskosten</TD>
                    <TD class="right"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotalTravelExpense", ""), "0,00")); %></TD>
                </TR>
                <TR class="data">
                    <TD class="left">KM vergoeding</TD>
                    <TD class="right"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotalTravelAllowence", ""), "0,00")); %></TD>
                </TR>
                <TR class="data">
                    <TD class="left">Overige:</TD>
                    <TD class="right"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotalExtraCost", ""), "0,00")); %></TD>
                </TR>
                <TR class="data">
                    <TD class="left">Honorarium:</TD>
                    <TD class="right"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotalService", ""), "0,00")); %></TD>
                </TR>
                <TR class="data">
                    <TD class="left" style="border-top:2px solid black">Totaal:</TD>
                    <TD class="right" style="border-top:2px solid black"><% Response.Write(smallMoneyToString(XmlNodeAttribute.GetString(XmlServicePaymentTotal, "mTotal", ""), "0,00")); %></TD>
                </TR>
                </TABLE>
            </TD>
<%      
        }
%>
        </TR>
<%      
        
    }
%>  
        <TR> <!-- OPVUL CELL -->
            <TD height="100%" colspan="10">&nbsp;</TD>
        </TR>

Download my music on SoundCloud

vrijdag 9 januari 2004 09:33

Acties:

crisp

Devver

Pixelated

rowspans en colspans ism een pixelprecieze layout is een no-go. Oplossing: tables nesten, geen tables gebruiken of met spacer-vulling gaan werken.

Intentionally left blank

vrijdag 9 januari 2004 09:36

Acties:

dominic

will code for food

Topicstarter

crisp schreef op 09 januari 2004 @ 09:33:
rowspans en colspans ism een pixelprecieze layout is een no-go. Oplossing: tables nesten, geen tables gebruiken of met spacer-vulling gaan werken.

Hmmz daar was ik al een beetje bang voor.. Ik vind het zo fout dat die height dan gewoon niet correct gerendered wordt, zou moeten werken volgens HTML logica.. (Nouja, logica

)

Deze layout is nl. bijna niet te doen zonder tables..

Download my music on SoundCloud

vrijdag 9 januari 2004 09:39

Acties:

André

Analytics dude

Ik zou er dan 2 tabellen van maken, 1 met het blauwe vak en 1 met de rest.

vrijdag 9 januari 2004 09:41

Acties:

crisp

Devver

Pixelated

De meeste browsers renderen tables op snelheid, niet op preciesie. Om een ingewikkelde tabel namelijk pixel-precies te kunnen renderen zijn eigenlijk 2 renderslagen nodig, en browsers doen dat niet.

Intentionally left blank

vrijdag 9 januari 2004 09:42

Acties:

dominic

will code for food

Topicstarter

André schreef op 09 januari 2004 @ 09:39:
Ik zou er dan 2 tabellen van maken, 1 met het blauwe vak en 1 met de rest.

Jep, zat ik ook aan te denken, probleem is dan dat ik de horizontale alignment met de rest van de cellen kwijtraak (Die in breedte wel weer zouden kunnen verschillen per factuur (Want dat is het))

Download my music on SoundCloud

vrijdag 9 januari 2004 10:33

Acties:

Verwijderd

Ik had ongeveer hetzelfde probleem, alleen stond er dan ook nog tekst in de 'rode' td. Als volgt opgelost: Gooi een div in die td met css eigenschappen:

code:

1
2
3

position: relative;
overflow: hidden;
height: 100%;

Als tekst (in de div) kun je misschien een paar mooie entertjes gebruiken

Volgens mij werkt het alleen als je de gele td's een height meegeeft; 5px ofzo;

Hmm, bij nader inzien is tabellen nesten toch 'n mooiere oplossing

vrijdag 9 januari 2004 11:22

Acties:

dominic

will code for food

Topicstarter

Verwijderd schreef op 09 januari 2004 @ 10:33:
Ik had ongeveer hetzelfde probleem, alleen stond er dan ook nog tekst in de 'rode' td. Als volgt opgelost: Gooi een div in die td met css eigenschappen:
code:
1
2
3
position: relative;
overflow: hidden;
height: 100%;
Als tekst (in de div) kun je misschien een paar mooie entertjes gebruiken Volgens mij werkt het alleen als je de gele td's een height meegeeft; 5px ofzo;

Hmm, bij nader inzien is tabellen nesten toch 'n mooiere oplossing

Helaas, geen effect..

Toch maar naar nesting kijken..

Download my music on SoundCloud