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

451

    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. Voiko normaali ihminen ryhtyä vasemmistolaiseksi?

      Tätä jäin pohdiskelemaan.
      Maailman menoa
      203
      4276
    2. SDP haluaa 40 000 nettomaahanmuuttajaa

      SDP:n Suunnanmuutos-vaihtoehtobudjetissa, käy ilmi, että demarit itse asiassa vaativat räjähdysmäistä ”työperäisen” maah
      Maailman menoa
      146
      3808
    3. Orpo: Velkajarrua vastustavaa puoluetta vaikea ajatella hallitukseen

      No Minja Koskelan kommunistipuolue jäi ulos tuosta. Kaikki eduskuntapuolueet vasemmistoliittoa lukuun ottamatta sopivat
      Maailman menoa
      137
      3261
    4. Hienoa! Eduskunta luopui käteisen käytöstä

      Nyt tuo sama muutos pitää saada myös muuhun yhteiskuntaan. Käteistähän ei tarvitse tänä päivänä enää kuin rikolliset.
      Maailman menoa
      53
      1647
    5. Ikävä sinua mies

      Vuosia kuluu, mutta tunteet ei ole hävinnyt. Tasoittuneet toki, kun ei olla nähty. Järki palannut päähän kuitenkin. Se i
      Ikävä
      19
      1578
    6. Mikä tämä henkilö mahtaa touhuta Parkanossa

      Kamalaa https://www.ylasatakunta.fi/teksti/pirkanmaan-karajaoikeus-vangitsi-koiran-tappamisesta-epaillyn-6.68.127794.b58
      Parkano
      34
      1550
    7. Sulla on avaimet ja keinot

      Jos haluat jatkaa tutustumista. Itse olen niin jäässä etten pysty tekemään enää mitään. Pidempi keppi johon on helpompi
      Ikävä
      25
      1395
    8. Orpo loukkaantui fasismiin viittaavasta sanavalinnasta

      Mutta miksi loukkaantui? Orpohan on tehnyt yhteistyötä fasistien kanssa jo vuonna 2019, siis jo neljä vuotta ennen loukk
      Maailman menoa
      27
      1351
    9. Kiinnostaa - ei kiinnosta - kiinnostaapas

      Selittäkää hämmentyneelle miksi miehiä ei ikinä kiinnosta silloin, kun sitä olisi itsekin kiinnostunut? Sitten kun siirt
      Sinkut
      118
      1178
    10. Martina haluaa Marbellaan

      Martinan tekisi mieli ottaa lennot Marbellaan, jossa näkisisi kauniita ja hyväntuulisia ihmisiä. No sitten pitää matkust
      Kotimaiset julkkisjuorut
      216
      1071
    Aihe