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

476

    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. Porvarimediat paniikissa demareiden huiman kannatuksen vuoksi

      Piti sitten keksiä "nimettömiin lähteisiin" perustuen taas joku satu. Ovat kyllä noloja, ja unohtivat sen, että vaalit
      Maailman menoa
      70
      5798
    2. KATASTROFI - Tytti Tuppurainen itse yksi pahimmista kiusaajista!!!

      STT:n lähteiden mukaan SDP:n eduskuntaryhmän puheenjohtaja Tytti Tuppurainen on käyttäytynyt toistuvasti epäasiallisesti
      Maailman menoa
      230
      4529
    3. Huono päivä

      Tänään on ollut tosi raskas päivä töissä. Tekis mieli itkeä ja huutaa. En jaksa just nyt mitään. Minä niin haluaisin ja
      Ikävä
      20
      2558
    4. Mikä siinä on ettei persuille leikkaukset käy?

      On esitetty leikkauksia mm. haitallisiin maataloustukiin, kuin myös muihin yritystukiin. Säästöjä saataisiin lisäksi lei
      Maailman menoa
      27
      2483
    5. Juuri nyt! Tytti Tuppurainen on käyttäytynyt toistuvasti epäasiallisesti

      Ai että mä nautin, Tytti erot vireille! "Käytös on kohdistunut avustajia ja toisia kansanedustajia kohtaan, uutisoi STT
      Maailman menoa
      73
      1478
    6. Puolen vuoden koeaika

      Voisi toimia meillä. Ensin pitäis selvittää "vaatimukset" puolin ja toisin, ennen kuin mitään aloittaa. Ja matalalla pro
      Ikävä
      11
      1383
    7. Onko kaivattusi

      liian vetovoimainen seksuaalisesti?
      Ikävä
      96
      1305
    8. Olen ihmetellyt yhtä asiaa

      Eli miksi naiset ovat niin pelokkaan tai vaitonaisen oloisia minun seurassani. Se sai minut ajattelemaan, että olen epäm
      Ikävä
      128
      1286
    9. seurakunnan talouspäällikön valinta meni perseelleen

      Nyt on ihan pakko kyseenalaistaa tuo Kemijärven seurakunnan päätös talouspäälliköstä. Valitulla ei ole talouspuolen osaa
      Kemijärvi
      96
      1176
    10. Rötösherra käräjillä

      Ähtäriläisyrityksen epärehellisyys oli niin suurta, että mies yhtiön takaa oli lähellä saada ehdotonta vankeutta. Vaikeu
      Ähtäri
      19
      1151
    Aihe