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
Table jossa kaikki kentät samanmittaisia
tdColumn
5
499
Vastaukset
- 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
Joensuun kaupunki levittelee tonttitietoja Keskisuomalaiselle
Sähköposteja ja tonttitietoja levitellään mm. Pasi Koivumaalle162206Oletko nainen alkanut kammoamaan minua
Sinua ei näy eikä kuulu, ja ilmeisesti kiertelet tilanteita. Oletko huomannut, että olet vieläkin ajatuksissani luvattom671509Saako 60 v vielä töitä? Arto Nyberg puhuu suoraan elämästä ilman töitä
Arto Nyberg täyttää tänään 60 v. Onnea! Nyberg totuttiin näkemään suoran haastatteluohjelman kapteenina vuodesta toise1061450Tiesitkö tätä ex-miehistä? Noriko Salo jysäytti yllätyspaljastuksen
Noriko Salo ja ex-F1 kuski Mika Salo olivat naimisissa v. 1999-2022. Kirsi Salon ex-mies puolestaan on muusikko Sammy A61332Toivoisitko Rakas vielä?
Haluaisitko vielä? Uskoisin osaavani näyttää sinulle, kuinka ainutlaatuinen nainen olet.681295Keskustelua kasteesta
You tubessa kaksi pappia keskustelivat kasteesta ja kritisoivat raamatullista uskovien kastetta. Toinen heistä yritti4001194Huh, huh! Sofia Belorf ei ole itse pessyt hiuksiaan kolmeen vuoteen
Sofia Belorf elää ökyelämää Dubaissa. Sofian arjessa kulta, raha ja luksus ovat vahvasti läsnä. Luksuselämään tottuneell741148Kuka? Riehui valtuuston kokouksessa tänään ?
Onko puolangan puolesta porukkaa. Vaikuttaa siltä. Sairasta.331115Ihan pieni näkeminen vaan
👋 ja minä olisin valmis jo vaikka mihin sun kanssa. Nämä on näitä.. 🤫🫣😘💥311077En haluaisi kaiken kuihtuvan pois
ilman, että olemme voineet jutella rauhassa kasvotusten... Mutta mistä ihmeestä löydän sinut?521046