Table jossa kaikki kentät samanmittaisia

tdColumn

Moi!

Idea saada table jossa kaikki kentät ovat saman mittaisia ilman että määrittää sille pikseli tai prosentuaalisen koon vaan koko määräytisi sisällö perusteella. Esimerkiksi jos tablessa on omissa sarakkeissa kissa, koira ja hevonen. Kun hevonen on näistä pisin sanana määräytyisi td- kentän kooksi tämä. Miten tehdään

5

454

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • qwerfgt4

      Lisäät kenttiin divin jossa sisältö. Lisäät myös toisen divin jonka leveys on 1px ja korkeus haluamasi (esim. 25 px) ja kolmannen divin jonka korkeus on 1px ja leveys haluamasi (esim. 25 px).

      < td >
      < div id="content" >Heppa< /div > < /div >
      < /td >
      < td >
      < div id="content" >Kissa< /div > < /div >
      < /td >

      • gfghghjhjkjfdgdggf

        kahta samaa id elementtiä ei voi käyttää..

        Mutta class määritettä voi olla...


      • qwerfgt4
        gfghghjhjkjfdgdggf kirjoitti:

        kahta samaa id elementtiä ei voi käyttää..

        Mutta class määritettä voi olla...

        No, sepä oli muutenkin perseestä.

        < td >
        < div class="content" >< div class="sep1" >Heppa< div class="sep2" >< /div > < /div >
        < /td >
        < td >
        < div class="content" >< div class="sep1" >Kissa< div class="sep2" >< /div > < /div >
        < /td >


      • qwerfgt4
        qwerfgt4 kirjoitti:

        No, sepä oli muutenkin perseestä.

        < td >
        < div class="content" >< div class="sep1" >Heppa< div class="sep2" >< /div > < /div >
        < /td >
        < td >
        < div class="content" >< div class="sep1" >Kissa< div class="sep2" >< /div > < /div >
        < /td >

        saatana...

        < td >
        < div class="content" >< div class="sep1" >< /div >Heppa< div class="sep2" >< /div > < /div >
        < /td >
        < td >
        < div class="content" >< div class="sep1" >< /div >Kissa< div class="sep2" >< /div > < /div >
        < /td >


      • qwerfgt4 kirjoitti:

        saatana...

        < td >
        < div class="content" >< div class="sep1" >< /div >Heppa< div class="sep2" >< /div > < /div >
        < /td >
        < td >
        < div class="content" >< div class="sep1" >< /div >Kissa< div class="sep2" >< /div > < /div >
        < /td >

        Olisi helpompi nähdä, mitä oikein tarkoitat, jos olisit tehnyt esimerkkisivun ja kertonut sen URLin. Toistaiseksi ei oikein näytä siltä, että ehdotuksesi lainkaan vaikuttaisi esitettyyn ongelmaan. Pikselimääräisiä asetuksia haluttiin olla käyttämättä (kuten syytä onkin), mutta kuitenkin tarjoat niitä. Lisäksi lisä-divien käyttö tuntuu aivan aiheettomalta – mitä niillä oletetaan saavutettavan?

        CSS:ssä ei ole mahdollisuutta asettaa taulukon rivin soluja samanmittaisiksi halutulla tavalla. Ne voidaan toki asettaa jotakin yksikköä kuten px, % tai em käyttäen, mutta ei sillä tavalla, että leveys olisi sellainen, että juuri riittää kaikille soluille. Sellainen asetus voidaan tehdä taulukon sarakkeelle mutta ei vaakariville.

        JavaScriptillä asian voi kuitenkin hoitaa melko helposti. Siinä voi käydä läpi rivin, laskea leveimmän solun leveyden ja asettaa muut sen mukaisiksi. Tätä varten ei aluksi aseteta mitään leveyksiä, vaan annetaan selaimen muotoilla vapaasti. Käytännössä riittää käydä läpi taulukon yksi rivi, jos ei ole käytetty mitään colspan-määritteitä. Voidaan ottaa jokin rivi, vaikkapa ensimmäinen, ja lisätä sen tr-tägiin esimerkiksi id="ekaRivi", ja sitten...


        var rivi = document.getElementById("ekaRivi");
        var suurinLeveys = 1;
        for ( var i = 0; i < rivi.childNodes.length; i ) {
        var leveys = rivi.childNodes[i].offsetWidth;
        if(leveys > suurinLeveys) { suurinLeveys = leveys; } }
        for ( var i = 0; i < rivi.childNodes.length; i ) {
        rivi.childNodes[i].style.width = suurinLeveys "px"; }


        Tuo kannattaa laittaa sivun loppuun, jotta selain ehtii lukea ja taittaa taulukon.

        Tässä CSS:ää on tietenkin vain solujen width-ominaisuuden asettaminen ja sekin tapahtuu JavaScriptissä.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. MIksi suurin osa persuista on alkoholisteja?

      Tätä jäin pohdiskelemaan....
      Maailman menoa
      41
      3416
    2. 35
      2928
    3. Kehutaan vaihteeksi Perussuomalaisia

      Perussuomalaiset ovat olleet melkoisen lokakampanjoinnin kohteena, vaikka ovat saaneet paljon hyvää aikaiseksi. Nyt on
      Maailman menoa
      141
      2799
    4. SDP ylivoimainen ykkönen

      En ole koskaan viitsinyt käydä äänestämässä, mutta nyt SDP:n etumatka on niin kutkuttava, että pakkohan se on vaivautua.
      Maailman menoa
      68
      2286
    5. Roiskeläpät takaisin niin alkaa lasit kestämään

      "Tuulilaseja hajottava talvi-ilmiö on ehkä ratkennut" Tämän päivän autoissa kun on esimerkiksi vanhempaa autokalustoa s
      Yleistä autoilusta
      41
      1772
    6. Polttomoottoriauto on köyhän merkki

      Kun ei ole varaa ostaa sähköautoa, niin joutuu köyhän autoa käyttämään.
      Maailman menoa
      83
      1448
    7. Mitä tarkalleen tunnet

      Minkälaisia tunteita sisälläsi liikkuu, kun tiedät, että ajattelen sinua lämmöllä ja jotain syttyy myös sinussa? Haluai
      Ikävä
      65
      1036
    8. Nainen, koska nähtiin viimeksi

      Mikä päivä? Tarkemminkin voit kohtaamistamme kuvailla. 🤗
      Ikävä
      51
      1006
    9. Kaivattusi ominaistuoksu?

      Itse vastaan juustonaksu 😅
      Ikävä
      71
      913
    10. Syyskuussa 2025 ensirekisteröidyistä henkilöautoista 43 % oli täyssähköautoja.

      Niitä rekisteröitiin 2 592 eli 41 % enemmän kuin vuotta aiemmin. Syyskuussa 2025 rekisteröidyistä uusista henkilöautois
      Hybridi- ja sähköautot
      3
      827
    Aihe