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

468

    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. Suomen kansa haluaa Antti Lindtmanista pääministerin

      Lindtman on miltei tuplasti suositumpi kuin etunimikaimansa Kaikkonen. Näin kertoo porvarimedian teettämä kysely. http
      Maailman menoa
      294
      4781
    2. Vain 21% kannattaa Lindtmania pääministeriksi

      se on selvästi vähemmän kuin puolueen kannatus, mites nyt noin?
      Maailman menoa
      135
      3066
    3. Miksei Björn Wahlroos jaa rahaa köyhille?

      Esimerkiksi Nordean tiloissa? Vai tuovatko ne köyhät hiekkaa marmorilattioille ja siksi ei pysty mursunviiksi pystyyn k
      Maailman menoa
      52
      2983
    4. Jouluksi miettimistä: kuka tai mikä valmistaa rahan?

      Nyt kun on ollut vääntöä rahasta ja eritoten sen vähyydestä, niin olisi syytä uida rahan alkulähteille, eli mistä se syn
      Maailman menoa
      28
      1541
    5. Julkinen sektori on elänyt aivan liian leveästi yli varojensa!

      Viimeisen 15 vuoden aikana julkisen puolen palkat ovat nousseet n. 40%, kun taas yksitysellä sektorilla vain n. 20%. En
      Maailman menoa
      227
      1242
    6. Missä kunnassa kaivattusi asuu

      Kuinka tarkkaa uskalla sanoa?
      Ikävä
      47
      1189
    7. Yksikään persu ei ole saanut Nobelin palkintoa

      Kertoo paljon persujen älyn puutteesta. Demareista mm. Ahtisaari on kyseisen palkinnon saanut.
      Maailman menoa
      7
      1016
    8. Miten antaa merkki hyvin eri ikäiselle miehelle, että kertoisi toiveensa ja ajatuksensa?

      Olen pitkään pitänyt miehestä, joka myös varmasti minusta. Hän ei tosin kerro ihastumisesta, eli voi hyvin olla, että tu
      Ikävä
      78
      991
    9. Emme koskaan keskustelleet kasvotusten syistä välirikollemme

      Enkä voisi kertoa perimmäistä rehellistä syytä. Kerroin sinulle pintapuolisen ”paketin” ja otin tavallaan omalle vastuu
      Ikävä
      58
      981
    10. Paskalaista valokuitulakiin

      Nyt maksajiksi joutuvat kaupunkilaiset eivätkä mökkiensä ulkohuusseissa kakistelevat mummot. Nimittäin EU määrää jokais
      Maailman menoa
      52
      979
    Aihe