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

462

    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. Hyvää syntymäpäivää Sanna 40 vee!!!!

      ᕼᗩᑭᑭY ᗷIᖇTᕼᗞᗩY Sister ❣️🥰 🎉🎂✨🍰🥳 🥳🎂🥂 🎉🎊🎁🎈🎂
      Maailman menoa
      144
      6028
    2. Kerro kaivattusi etunimi

      Miehille..
      Ikävä
      158
      3142
    3. Mikä on vaikeinta siinä, että menetti yhteyden kaivattuun, jota vielä ajattelee?

      Mikä jäi kaihertamaan? Jos jokin olisi voinut mennä toisin, mitä se olisi ollut? Mitä olisit toivonut vielä ehtiväsi san
      Ikävä
      434
      3109
    4. Onhan tää tyhmää ajatella sua kun tuskin ees muistat mua

      Hyvää yötä sinne jonnekin. 💔
      Ikävä
      26
      2384
    5. Persut rahoittavat velkarahalla rikkaiden ökyelämää

      Minkä vuoksi persut eivät leikkaa rikkailta, joilla on maksukykyä? Tuskinpa tuo persujen käytös saa Suomen kansalta hyv
      Maailman menoa
      56
      2251
    6. Ikuiset kaipaajat

      Miksette vaan mene sen kaipauksen kohteen luokse ja puhu sille suoraan? Mitä järkeä on kaipailla jotain puolituttua vuo
      Ikävä
      76
      2063
    7. Riikka ottaa miljardi euroa EU:n yhteisvelkaa Suomelle

      Niin kääntyi irvipersun takki taas, vaikka vaalilupauksissa oli ettei yhteisvelkaa Suomi enää koskaan ota. No nyt otti m
      Maailman menoa
      16
      1949
    8. Kerro kaivattusi etunimi

      Naisille
      Ikävä
      79
      1603
    9. Veronmaksajat kustantavat yrittäjien eläkkeitä jo yli 500 miljoonalla

      Suomalaista yrittäjää ei kommunistista erota. Aktiivisen "yrittämisen" maksattaa yritystukina yhteiskunnalla, ja vieläpä
      Yrittäjyys
      14
      1214
    10. Kun ei numeroa

      niin en edes voi viestittää, et suunnitelmiin tuli muutos. Ikävä on, ja kasvaa vaan🤍
      Ikävä
      13
      1191
    Aihe