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

463

Äänestä

    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 >

      • Yucca
        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ä.

    Takaisin ylös

    Luetuimmat keskustelut

    1. Nainen kokki autossa kammottavan kuoleman sähköauto-Teslan syttyessä tuleen.

      https://www.is.fi/autot/art-2000011652873.html Näin vaarallisia sähköautopalot voivat olla.
      Maailman menoa
      92
      5552

    2. Persuja ei aluevaltuustoissa näy

      Ei tunnu persuja paljon paikalliset asiat kiinnostavan, vaan ainoastaan ulkomaalaiset, joku Israel ja Trumpin fanitus.
      Maailman menoa
      57
      3671

    3. Päivän Riikka: Uudenkaupungin autotehdas hiljeni

      Näin ne 100 000 uutta pysyvää ei-tempputyötä yksityiselle sektorille tämän hallituksen ansiosta syntyy. Työntekijöille j
      Maailman menoa
      67
      3037

    4. Riikka vie Suomen kohta ykköseksi työttömyyskisassa

      Espanja: 10,5 % Suomi: 10,3 % Ruotsi: 9,3 % Kisa on tiukkaa, mutta Riikalla hyvä draivi päällä. Vasemmistolaisen päämin
      Maailman menoa
      52
      2243

    5. Kerro kaivattusi nimi tai nimikirjaimet

      🌠 Tähdenlento! Kirjoittamalla kaivattusi nimen tai nimikirjaimet tähän, saattaa toiveesi toteutua.
      Ikävä
      61
      2006

    6. Alkuvuodesta poistuu työttömyyskorvaus kaikilta joilla on säästössä rahaa

      Tippuu korvaukselta iso määrä työttömiä.
      Maailman menoa
      309
      1981

    7. Miksi pitäisit enemmän

      Minusta kuin siitä toisesta?
      Ikävä
      47
      1636

    8. Mitä meidän välillä

      Tulee tapahtumaan vai tuleeko mitään?
      Ikävä
      96
      1521

    9. Tämmönen höpsö

      Höpönassu mä olen. En mikään erikoinen…hölötän välillä ihan levottomia. Tykkäisit varmasti jos olisin siellä sun vieress
      Suhteet
      44
      1417

    10. Mikä ihme teitä savolaisia tuossa

      p*rs*reiässä niin kiinnostelee? Että siitä pitää päntönnään huutaa.
      Tuusniemi
      12
      1409
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt