[HTML] Lege <TR> heeft toch een hoogte - Softwareontwikkeling

dinsdag 27 april 2004 09:57

Acties:

Topicstarter

Ik zit met het volgende probleem. Ik ben een web app aan het maken waarbij velden moeten verdwijnen en verschijnen afhankelijk van het antwoord. Nu gaat dat prima alleen loop ik tegen het volgende probleem aan.

Als ik lege rijen heb, dat wil zeggen rijen gevuld met hidden div's dan hebben deze toch een hoogte. Weet iemand een mogelijkheid om deze lege rijen een hoogtte van 0 te geven? Ik heb al zaken als padding en margins op 0 zetten geprobeerd. Het hoeft overigens alleen in IE te werken.

Hieronder een voorbeeldje de code die het probleem goed weergeeft.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; 
                        PADDING-BOTTOM: 0px; MARGIN: 0px; 
                        BORDER-TOP-STYLE: none; PADDING-TOP: 0px; 
                        BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; 
                        BORDER-COLLAPSE: collapse; BORDER-BOTTOM-STYLE: none">
            <tr>
                <td>Gevulde row</td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr bgcolor="black">
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td><div style="display:none">Even testen</div>
                </td>
            </tr>
            <tr>
                <td>Laatste gevulde row</td>
            </tr>
        </table>
    </body>
</html>

dinsdag 27 april 2004 10:00

Acties:

Verwijderd

'height:0'?

dinsdag 27 april 2004 10:13

Acties:

Anakin239

Topicstarter

Height=0 op de TD of de TR heeft geen effect.

dinsdag 27 april 2004 10:13

Acties:

T-MOB

Misschien een domme opmerking omdat je later meer cellen per rij zou gaan willen gebruiken, maar waarom gebruik je in godsnaam een tabel met maar 1 cel per rij??

code:

<div id="container">
 <div>gevulde koek</div>
 <div style="display: none">lege div</div>
 <div style="display: none">lege div</div>
 <div>etcetera</div>
</div>

Lijkr me persoonlijk makkelijker....

Regeren is vooruitschuiven

dinsdag 27 april 2004 10:14

Acties:

watzie

Verwijderd schreef op 27 april 2004 @ 10:00:
'height:0'?

Dat kan niet want een table row heeft geen height attribuut (dus ook geen height style)

dinsdag 27 april 2004 10:16

Acties:

Anakin239

Topicstarter

Het is inderdaad de bedoeling dat er meerdere cellen in de rij komen. Dit is slechts een voorbeeldje om het probleem te illustreren.

dinsdag 27 april 2004 10:17

Acties:

Willem

* Willem ducks

Zou trouwens als je spacing/padding wilt hebben binnen een td gaan werken met margin:x; en padding:x; ...

Motor (of auto) onderhoud bijhouden

dinsdag 27 april 2004 10:18

Acties:

ritsjoena

Vergeet niet je lettertype te verkleinen voor de betreffende rijen. Als deze namelijk groter is dan de rijhoogte neemt hij die als minimale hoogte (is mijn ervaring). Zelfs als de rij verder leeg is.

[ Voor 11% gewijzigd door ritsjoena op 27-04-2004 10:20 ]

dinsdag 27 april 2004 10:23

Acties:

Verwijderd

om één of andere vage reden wil het helpen als je inplaats van:

code:

1
2
3

<tr>
    <td></td>
</tr>

dit doet:

code:

1	<tr><td></td></tr>

dus geen enters tussen je tr / td tags. Ik weet uit ervaring dat sommige browser de neiging hebben die witruimte van een enter mee te nemen.

dinsdag 27 april 2004 10:25

Acties:

watzie

(sorry da'k nog geen directe oplossing voor je probleem lever, ben ook effe aan het kijken, maar toch nog effe een kleine opmerking omdat ik nou eenmaal vind dat je dingen moet doen zoals ze moeten...)
je gebruik van div is niet echt correct hier.
<div>gebruik je voor langere stukken over het algemeen, en specifiek wanneer je blocks (bijv <table> etc) wilt omspannen.

als je inline wilt stijlen, moet je <span> gebruiken.
In jouw voorbeeld dus absoluut overal waar div staan span.

Met het SPAN element kan een beperkt deel van een HTML-document worden ingesloten. Met behulp van de attributen STYLE, CLASS, of ID kan aan dat deel een stijl worden gekoppeld. Het SPAN element heeft een vergelijkbare functie als het DIV element, alleen mag het slechts inline inhoud bevatten en geen elementen op blokniveau (zoals P, UL, TABLE en FORM).

dinsdag 27 april 2004 10:31

Acties:

ritsjoena

Nu ik Watzie's reactie lees herinner ik het me. DIV plaatst een "enter" om een duidelijk onderscheidbaar blok te krijgen. Dit zorgt dus voor een ectra regel in je kolom en dus extra hoogte. SPAN is inderdaad vel beter in dit geval.

dinsdag 27 april 2004 10:31

Acties:

Anakin239

Topicstarter

Cellpadding, spacing en margins in de cell werken ook niet.

Bedankt voor de tip over spans en divs. Overigens lost dat het probleem niet op. Het verwijderen van de enters ook niet. Ook als ik geen div plaats in de rijen treedt dit probleem op.

[ Voor 42% gewijzigd door Anakin239 op 27-04-2004 10:32 ]

dinsdag 27 april 2004 10:34

Acties:

Verwijderd

Anne merkt op dat als je een DIV op 'display:none' zet je het uit de normal flow haalt. En voor al die HTML denkende mensen hier. Ik gaf een CSS idee (geen idee of het werkt) en dat had niks te doen met height=0 of andere rare attributen.

Maar de TR op 'display:none' zetten moet zeker helpen, blijft de vraag natuurlijk waarom je uberhaupt tabellen gebruikt.

[ Voor 4% gewijzigd door Verwijderd op 27-04-2004 10:34 ]

dinsdag 27 april 2004 10:53

Acties:

Anakin239

Topicstarter

Anne,

de display op 0 zetten werkt inderdaad, maar ik had gehoopt op iets van een andere mysterieuze property waardoor ik geen extra slag nodig heb na de generatie van de pagina om rijen op display 0 te zetten.

dinsdag 27 april 2004 13:20

Acties:

Copyman

Dode muis

Het kan eventueel ook met:

Cascading Stylesheet:

1
2
3

td {
  font-size:0;
}

Of alleen voor die ene TD een rule maken:

Cascading Stylesheet:

#emptyTd {
  font-size:0;
}


<tr>
  <td id="emptyTd"></td>
</tr>

[ Voor 82% gewijzigd door Copyman op 27-04-2004 13:25 ]

Zeer belangrijke informatie: Inventaris

dinsdag 27 april 2004 15:36

Acties:

InZane

watzie schreef op 27 april 2004 @ 10:14:
[...]

Dat kan niet want een table row heeft geen height attribuut (dus ook geen height style)

Uh als iets geen height attribuut heeft heeft kan het wel een CSS height hebben hoor.
Kweenie waar je die wijsheid vandaan hebt..

Ben het verder helemaal eens met anne.
Divjes in een td.. beetje vreemde constructie.

[ Voor 13% gewijzigd door InZane op 27-04-2004 15:37 ]

dinsdag 27 april 2004 15:50

Acties:

Anakin239

Topicstarter

ok, ok, point taken. Divjes in een TD is niet helemaal juist.

Maar ondertussen heb ik nog geen oplossing waar ik 100% gelukkig van wordt.

De pagina wordt op basis van vragen uit een database opgebouwd en er kunnen meerdere vragen in een rij staan.

Met de manier van Anne moet ik eerst de vragen toevoegen vervolgens bepalen of alle vragen in een TR onzichtbaar zijn en dan de rij onzichtbaar maken. Had liever gehad dat de rij gewoon een hoogte van 0 kreeg.

dinsdag 27 april 2004 15:58

Acties:

efd

Gewoon

code:

1
2
3

<table border=0 cellpadding=0 cellspacing=0>
  <tr><td></td></tr>
</table>

Het is nou eenmaal zo.

dinsdag 27 april 2004 16:02

Acties:

Anakin239

Topicstarter

En dat werkt dus niet.

Zet er maar eens het volgende in. Je zal zien dat er een mooie barcode ontstaat.

HTML:

<tr bgcolor="black"><td></td></tr>
<tr ><td></td></tr>
<tr bgcolor="black"><td></td></tr>
<tr ><td></td></tr>
<tr bgcolor="black"><td></td></tr>
<tr ><td></td></tr>
<tr bgcolor="black"><td></td></tr>
<tr ><td></td></tr>
<tr bgcolor="black"><td></td></tr>

dinsdag 27 april 2004 16:03

Acties:

efd

En een <tr style="display: none;"> ?

Het is nou eenmaal zo.

dinsdag 27 april 2004 16:05

Acties:

Anakin239

Topicstarter

Dat werkt inderdaad, zie hierboven ook. Maar ik ben op zoek naar een andere oplossing.

dinsdag 27 april 2004 16:15

Acties:

T-MOB

Anakin239 schreef op 27 april 2004 @ 15:50:

De pagina wordt op basis van vragen uit een database opgebouwd en er kunnen meerdere vragen in een rij staan.

Kun je dan niet gewoon zorgen dat de rijen en cellen alleen gegenereerd worden als ze nodig zijn?? Heb je ook geen divjes meer in je cellen, iedereen blij...

* T-MOB mist het algehele plaatje nu een beetje

Regeren is vooruitschuiven

dinsdag 27 april 2004 16:25

Acties:

Anakin239

Topicstarter

Laten we de divjes buiten beschouwing laten. Daar komen spans te staan of inputs.

En ze moeten wel aanwezig zijn maar geen ruimte in nemen.

dinsdag 27 april 2004 16:48

Acties:

Verwijderd

Het wordt er niet duidelijker op*

dinsdag 27 april 2004 16:54

Acties:

Anakin239

Topicstarter

Ok, dan probeer ik het nog een keer.

Wat ik zoek is een oplossing waarbij ik de TR niet op een display van none hoef te zetten en waarbij de onderstaande code geen barcode oplevert.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table cellpadding=0 cellspacing=0 border=0 
                        style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; 
                        PADDING-BOTTOM: 0px; MARGIN: 0px; 
                        BORDER-TOP-STYLE: none; PADDING-TOP: 0px; 
                        BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; 
                        BORDER-COLLAPSE: collapse; BORDER-BOTTOM-STYLE: none">
            <tr><td>Gevulde row</td></tr>
            <tr bgcolor="black"><td></td></tr>
            <tr ><td></td></tr>
            <tr bgcolor="black"><td></td></tr>
            <tr ><td></td></tr>
            <tr bgcolor="black"><td></td></tr>
            <tr ><td></td></tr>
            <tr bgcolor="black"><td></td></tr>
            <tr ><td></td></tr>
            <tr bgcolor="black"><td></td></tr>
            <tr><td>Laatste gevulde row</td></tr>
        </table>
    </body>
</html>

dinsdag 27 april 2004 17:04

Acties:

Verwijderd

Zoiets?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <table cellpadding=0 cellspacing=0 border=0 style="padding:0px; margin:0px; BORDER-COLLAPSE: collapse;">
            <tr><td>Gevulde row</td></tr>
            <tr><td></td></tr>
            <tr ><td></td></tr>
            <tr><td></td></tr>
            <tr ><td></td></tr>
            <tr><td></td></tr>
            <tr ><td></td></tr>
            <tr><td></td></tr>
            <tr ><td></td></tr>
            <tr><td></td></tr>
            <tr><td>Laatste gevulde row</td></tr>
        </table>
    </body>
</html>

dinsdag 27 april 2004 17:23

Acties:

InZane

Ik snap nog steeds niet wat er tegen display: none; is

dinsdag 27 april 2004 18:08

Acties:

T-MOB

OK, probeer ik het ook nog eens..
In mijn beste test heb ik in IE een streepje van 1px voor elkaar kunnen krijgen (Moz deed het toen perfect). Misschien is het dus een idee om op een andere manier je probleem op te lossen...

Bijvoorbeeld door serverside te zorgen dat een onnodige <tr> niet in het bestand komt. (Je vragen komen toch uit een db?).

Of door niet met een tabel te werken maar met andere elementen. Hoe belangrijk is het dat vragen die nu in een rij staan ook deze rijvorm behouden? Kun je niet af met floatende divs in een container...

Kortom in welke context staat je probleem?

Regeren is vooruitschuiven

woensdag 28 april 2004 09:45

Acties:

Anakin239

Topicstarter

Iedereen bedankt voor de pogingen.

Zoals T-Mob zegt zal ik op zoek gaan naar een andere oplossing.