Table som roter td bredde

[Svish]

Har et table hvor bredden på td varierer. (brukt til data og ikke design, so no comments like that please )

 

table ser ut omtrent som dette:

<table>
 <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>X</td>
 </tr>
 <tr>
    <td colspan="4">Yttligere informasjon om raden ovenfor</td>
 </tr>
 ..
 ..
</table>

Den første tr inneholder litt data, og den siste X er en knapp som viser og gjemmer den andre tr. Bruker .toggle() i prototype.js. De to tr er repetert nedover for en rekke filer. Den første raden inneholder stort sett et navn og filstørrelse og slike ting, mens den andre tr inneholder en nærmere beskrivelse.

 

Og det fungerer neesten ypperlig. Problemet mitt er at bredden på td'ene i de odde radene varierer når jeg åpner og lukker partalls radene. Og hvor mye de varierer kommer an på hvor mye tekst som er i partalls radene! Med andre ord, hvor mye tekst det er i den td colspan="4" avgjør bredden til de andre td som ikke har noen colspan. Og jeg fatter ikke hvorfor det skal ha noe å si. Er det noen måte å fikse det på så de ikke driver å hopper rundt?

 

Har prøvd med FireBug i FireFox, og hvis jeg åpner en, og så via firebug on-the-fly putter inn mer og mer tekst i en av de beskrivelses td, så flytter de andre mer og mer på seg. Har prøvd å sette fast bredde på ting og slikt, men ser ikke ut til å hjelpe :?

 

(Beklager at jeg ikke har noen link til eksemplet, men siden er litt konfidensiell foreløpig, hehe...)

Endret 28. november 2007 av Tussi_qwerty

[arex1337]

Jeg ser ingen grunn til å prøve og kontrollere hvordan <table>, <tr>, og <td> oppfører seg, så lenge du har brukt dem semantisk riktig.

 

Men du kan jo ta et skjermbilde (husk å klippe bort alle forretningshemmelighetene) og poste det.

[Haraldson]

Ser ingen grunn? Vel, vi har vel den åpenbare grunnen, nemlig at det ikke blir seendes ut som han vil?

 

Trenger et skjermskudd for å forstå problemet selv.

[Stian Jacobsen]

1. Bruk korrekt oppsett

<table>
<thead>
 <tr>
  <td>
  </td>
 </tr>
</thead>
<tbody>
 <tr>
  <td>
  </td>
 </tr>
</tbody>
</table>

2. Du kan selv definere bredde med CSS

eks.

td.nren { width: 40% }

[Haraldson]

Det er like korrekt markup uten thead og tbody.

[FrodeNilsen]

Hvis jeg forstår deg riktig, så har du en knapp i en rekke. Denne knappen skjuler neste rekke i tabellen, og ved å trykke på den vises den skjulte rekken.

 

Det finnes mange oppføringer i tabellen.

 

Når en skjult rekke vises, hender det at bredden på kolonnene endres? Det er dette som er problemet?

 

Jeg tar utgangspunkt i dette.

 

Innholdet i den skjulte rekken kan føre til at nettleseren gjør hele tabellen bredere, slik at bredden på kolonnene endres. Jeg ville enten definert bredden til tabellen og kolonnene stramt, eller jeg ville plassert innholdet i den skjulte rekken i en div-boks, og definert en fornuftig bredde på denne.

[arex1337]

Ser ingen grunn? Vel, vi har vel den åpenbare grunnen, nemlig at det ikke blir seendes ut som han vil?

Poenget mitt er at tabell-elementer er forsøkt implementert (i nettlesere) med mest mulig fornuftig oppførsel med hensyn på tabellens innhold. Det finnes selvsagt en balanse mellom semantikk og estetikk her, men i mange tilfeller er det best å overlate slike presentasjonsvalg til nettleseren (som da også vil si sluttbrukeren). Siden jeg ikke har sett siden, kan jeg selvsagt ikke uttale meg om hva som er den beste løsningen, men det er noe å ha i hodet i det minste. Hvis du vil lese mer om slike hensyn, kan du google etter "accessibility" o.l.

 

 

1. Bruk korrekt oppsett

<table>
<thead>
 <tr>
  <td>
  </td>
 </tr>
</thead>
*snip*

*snip*

Når du først har definert den første raden som overskriftsrad, kan <th>-elementet også være noe å ta med? (Isteden for <td> i den første raden.)

[Stian Jacobsen]

Når du først har definert den første raden som overskriftsrad, kan <th>-elementet også være noe å ta med? (Isteden for <td> i den første raden.)

 

Beklager det

Haraldson: Jeg er klar over at markupen er riktig uten thead og tbody, men det er det som er anbefalt av W3C