[html/css] Tabel: kolommen dezelfde breedte geven - Softwareontwikkeling

zaterdag 5 augustus 2006 17:51

Acties:

Verwijderd

Topicstarter

Ik probeer het volgende voor elkaar te krijgen. Een tabel met kolommen waarbij de inhoud niet even lang is. Ik wil graag de automatisch berekende minimale grootte van de langste cel gebruiken als breedte van elke kolom. Dit heb ik ooit eens gezien als stijl-property, maar nu ik het nodig heb kan ik het nergens in de documentatie vinden.

Voorbeeld:
Afbeeldingslocatie: http://school.doesntexist.org/kolommenvoorbeeld.png

Afbeeldingslocatie: http://school.doesntexist.org/kolommenvoorbeeld.png

( vergeef me mijn paint-skills

)

Wie weet over welke property ik het heb? Bedriegt mijn geheugen mij misschien?

zaterdag 5 augustus 2006 18:02

Acties:

Verwijderd

table-layout:fixed?

zaterdag 5 augustus 2006 18:09

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zaterdag 05 augustus 2006 @ 18:02:
table-layout:fixed?

Nee, dat fixeert de grootte van de tabel. Dat wil ik niet; de cel met de breedste content moet bepalend zijn voor de breedte van elke kolom.

Zo krijg je even grote kolommen waar alle content in past.

[ Voor 10% gewijzigd door Verwijderd op 05-08-2006 18:17 ]

zaterdag 5 augustus 2006 18:55

Acties:

JayVee

shibby++!

Ik kan mij niet herinneren zoiets ooit als HTML attribuut of CSS style te hebben gezien. Ik denk dat je hier wat JavaScript voor zal moeten schrijven. Zo lastig is dat ook weer niet gelukkig.

ASCII stupid question, get a stupid ANSI!

zaterdag 5 augustus 2006 19:25

Acties:

Borizz

Ik geloof ook niet dat hier een css property voor is en je zal toch echt javascript moeten gebruiken om dit voor elkaar te krijgen.

If I can't fix it, it ain't broken.

zaterdag 5 augustus 2006 19:46

Acties:

BalusC

Carpe diem

Werken percentages opgeven in de td width niet?

Edit: dus elke td precies dezelfde width-percentage opgeven. Bij een tabel met 5 kolommen zet je bij elke td de witdh op 20%. Het is afdoende om dat alleen in de td's van de th te doen

[ Voor 67% gewijzigd door BalusC op 05-08-2006 19:47 ]

zaterdag 5 augustus 2006 19:53

Acties:

Verwijderd

Topicstarter

Je krijgt dan inderdaad gelijke kolommen. Alleen wordt er dan nog niet aan de hand van de content bepaald hoe groot een kolom minimaal moet worden. Hij vult dan gewoon het scherm. Ik zal morgen eens naar een javascript-oplossing kijken.

zaterdag 5 augustus 2006 20:08

Acties:

BalusC

Carpe diem

Hij vult het scherm? Heb je soms table width op 100% staan?

Dit werkt prima:

blaaaaaaaaa

bla

blaaaaa

bla

blaaa

HTML:

<table border="1">
    <tr>    
        <td width="20%">blaaaaaaaaa</td>
        <td width="20%">bla</td>
        <td width="20%">blaaaaa</td>
        <td width="20%">bla</td>
        <td width="20%">blaaa</td>
    </tr>
</table>

zaterdag 5 augustus 2006 20:32

Acties:

tjmv

Verwijderd schreef op zaterdag 05 augustus 2006 @ 17:51:[..]

Dit heb ik ooit eens gezien als stijl-property, maar nu ik het nodig heb kan ik het nergens in de documentatie vinden.

[..]

Wie weet over welke property ik het heb? Bedriegt mijn geheugen mij misschien?

Ik begrijp eigenlijk niet wat je bedoelt, maar volgens mij komt min-width het dichts bij, hoewel ik niet snap wat je er in dit geval aan hebt?

edit:
@BalusC: Daar zijn colgroups en cols eigenlijk voor bedoeld (maar wordt bijna niet gebruikt):

[..]

edit2:
Dit werkt dus niet.. Als een kolom te groot wordt, korten de anderen in.

[ Voor 51% gewijzigd door tjmv op 05-08-2006 20:49 ]

zaterdag 5 augustus 2006 22:34

Acties:

Verwijderd

Verwijderd schreef op zaterdag 05 augustus 2006 @ 18:09:
Nee, dat fixeert de grootte van de tabel.

Nee. het fixeert de breedte van de kolommen. Een opgegeven breedte wordt gelijkmatig over alle kolommen verdeeld, dus niet naar ratio van inhoud, zoals normaal.

HTML:

<html>
  <head>
    <style type="text/css">
      table {
        border:1px solid #000;
      }
      td {
        border:1px solid #000;
      }
    </style>
  </head>
  <body>
  
    <table style="table-layout:fixed;">
      <tr>
        <td>1</td>
        <td>12</td>
        <td>123</td>
        <td>1234</td>
        <td>12345 12345 12345 12345 12345</td>
      </tr>
    </table>

    <table>
      <tr>
        <td>1</td>
        <td>12</td>
        <td>123</td>
        <td>1234</td>
        <td>12345 12345 12345 12345 12345</td>
      </tr>
    </table>

  </body>
</html>

Dat wil ik niet; de cel met de breedste content moet bepalend zijn voor de breedte van elke kolom.

Kan niet. sorry. Je zult achteraf met JavaScript breedtes moeten gaan opvragen en zetten.

edit:
Was eigenlijk vrij makkelijk

JavaScript:

function equalize() {
    var oTable = document.getElementById('eqTable');
    var aTD = oTable.getElementsByTagName('td');
    var iWidth = 0;

    for(var i=0; i<aTD.length; i++) {
        iWidth = Math.max(aTD[i].offsetWidth, iWidth);
    }

    for(var i=0; i<aTD.length; i++) {
        aTD[i].style.width = iWidth + 'px';
    }
}

[ Voor 15% gewijzigd door Verwijderd op 05-08-2006 22:47 ]

zaterdag 5 augustus 2006 22:47

Acties:

user109731

Verwijderd schreef op zaterdag 05 augustus 2006 @ 22:34:
Kan niet. sorry.

Wat is er mis met width:20% toevoegen aan td {} in de CSS die je gaf? Zoals BalusC zei dus

@TS: Je kan ook iets als <colgroup span="5" width="20%"> gebruiken, al vind ik zelf de CSS-oplossing wat mooier.