Tavoitteena olisi siis saada CSS:llä taulukkoon sisäkehykset (soluille). Taulukon sisäkehyksiähän voi säädellä rules-attribuutilla, mutta haluaisin tehdä jutun CSS:llä. Miten tämä onnistuu?
Mitä ihmeen sisäkehyksiä? Tarkoitatko nyt ihan vain solujen reunoja, joita säädetään kuin minkä tahansa muunkin elementin reunoja eli border-alkuisilla säännöillä?
Joo, taisin ilmaista asian vähän huonosti. Eli tosiaan solujen kehykset, mitä valitsinta niiden kanssa kannattaisi käyttää?
Solu on td ja otsikkosolu th, onko tässä jotain epäselvää?
Eikä tarvi Googlessakaan kovin kummosta hakusanaa.
Kiitän. Lähdin ajattelemaan tuota vähän väärästä näkökulmasta, jonka takia Googlekaan ei löytänyt mitään.
Lisäys: Käytin valitsimena "table#taulukko td" ja kehys piirtyy myös ulkoreunalle. Kirjoitin lisäksi myös "table#taulukko {border: none;}", mutta sekään ei korjannut ongelmaa.
Alluk., jos tarkoitat, että vain solujen välissä on reunaviivat mutta ei koko taulukon ympärillä, asetetaan ensin kaikki reunaviivat kaikille soluille ja sitten poistetaan ensimmäisen sarakkeen solujen yläpuolinen reunaviiva jne. Tämä sujuu CSS3:n välineillä aika helposti:
table#taulukko td { border: solid 1px; }
table#taulukko tr:first-child td { border-top: none; }
table#taulukko tr:last-child td { border-bottom: none; }
table#taulukko td:first-child { border-left: none; }
table#taulukko td:last-child { border-right: none; }Ei toimi (tai oikeammin: toimii hassusti) IE 8:lla ja vanhemmilla. Jos pitää toimia niilläkin, niin sitten vain tekemään homma vähän hankalammin luokkien avulla (class-määrite ekalle ja viimeiselle tr-elementille sekä jokaisen rivin ekalle ja vikalle solulle).
Nostan tätä vanhahkoa keskustelunpätkää ylöspäin tehtyäni jännän havainnon taulukon käyttäytymisestä:
<!DOCTYPE HTML>
<html>
<head>
<title>Reunat</title>
<style type="text/css">
table td {
border: 1px solid #000;
}
table {
border: 2px solid transparent;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>Jos 2px tilalle vaihtaa 1px, niin sitten taulukon ympärille piirtyy musta 1px reunus. Tällaisenaan taas ulommainen reunus puuttuu ja vain solujen välillä on viivat. Eri selaimien käyttäytymistä en ole testaillut, ainoastaan Firefoxilla testattu tämä nykyinen tulos.
Se jännä havainto on siis se, että td:n reunasääntö on tärkeämpi kuin tablen reunasääntö, paitsi jos tablen reunus on leveämpi kuin td:n samaan kohtaan luoma reunus. Ja eron tosiaan pitää näkyä pikseleissä, esim. 1.1px ei riitä.
Merri kirjoitti:
Se jännä havainto on siis se, että td:n reunasääntö on tärkeämpi kuin tablen reunasääntö, paitsi jos tablen reunus on leveämpi kuin td:n samaan kohtaan luoma reunus.
Se on ehkä erikoista, mutta ihan määrittelyjen mukaista. Ks.
http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution
Sen mukaan paksumpi reunaviiva voittaa ohuemman, mutta yhtä paksuista ja muutenkin samanlaisista solun reunaviiva voittaa taulukon reunaviivan.
Taustalla oleva periaate on se, että ”tärkeämmän näköinen” reunaviiva voittaa, mutta samannäköisistä voittaa se, joka on asetettu ”tärkeämmälle” elementille. Ajatuksena on, että solut – joissa on varsinainen sisältö – ovat tärkeämpiä kuin rivit ja taulukko, joihin ne on järjestetty.
Minusta tuossa hieman vaikuttaa toteutukselliselta ongelmalta se, että ero syntyy vain pikseleissä. Eikö paksuuden pitäisi vaikuttaa myös alipikselimittaluokassa? Selaimet toki ovat historiallisista syistä hyvin pikselikeskeisiä, mutta nykyisin elementtien sijoittelussa, leveyksissä ym. otetaan todella hyvin huomioon alipikseliarvot.
Toisaalta tuon ulkoreunan piilottamiseen näemmä riittää tämäkin yksinkertaisuus, joka on mainittu heti ensimmäisenä linkkisi listassa:
table td {
border: 1px solid #000;
}
table {
border: hidden;
border-collapse: collapse;
}Kun kerran hidden on tärkein, niin saa ainakin lyhyen CSS:n tälle toteutukselle. Josko tämän muistaisi seuraavalla kerralla, kun tarvitsee jotakin vastaavaa taulukon ulkoasussa...
Merri kirjoitti:
Minusta tuossa hieman vaikuttaa toteutukselliselta ongelmalta se, että ero syntyy vain pikseleissä. Eikö paksuuden pitäisi vaikuttaa myös alipikselimittaluokassa?
Hyvä kysymys. Speksissä puhutaan vain kapeammasta tai leveämmästä. CSS-spekseissä on aika paljon jätetty toteutuksen varaan, vaikka yleisestä yksityiskohtaisuudesta ja täsmällisyydestä voi saada toisenlaisen kuvan.
Voi jopa kysyä, eikö esimerkiksi 1.01px ole suurempi kuin 1px, vaikka ulkoasussa ei olisi eroa edes alipikselitasolla. Periaatteessahan eron havaittavuus riippuu toteutuksesta ja tilanteesta – esimerkiksi zoomaus voi muuttaa tilannetta.
Merri kirjoitti:
Toisaalta tuon ulkoreunan piilottamiseen näemmä riittää tämäkin yksinkertaisuus, joka on mainittu heti ensimmäisenä linkkisi listassa:
table td { border: 1px solid #000; } table { border: hidden; border-collapse: collapse; }
Totta, sellainen vain ei ensimmäisenä tule meikäläisen |-aivon mieleen: miksi asettaisin table-elementille reunuaviivan, kun nimenomaan sille *en* halua reunaviivaa? Mutta tässä negatiiviajattelu on voimaa, tai ainakin yksinkertaistaa asioita (ja vähentää selainriippuvuutta).
Tein tässä lisää mielenkiintoisia havaintoja tähän liittyen. Tässä ensin koodi:
<!DOCTYPE HTML>
<html>
<head>
<title>Reunat</title>
<style type="text/css">
td,th {
border: 1px solid #000;
}
th {
background-color: #F9F9F9;
background: -khtml-linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
background: -moz-linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
background: -ms-linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
background: -o-linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
background: -webkit-linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
background: linear-gradient(rgba(255, 255, 255, 0),#F9F9F9 75%,#EEE 100%);
border-right-color: #DDD;
font-variant: small-caps;
font-weight: normal;
padding: 5px;
}
table {
border: hidden;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Sarake 1</th>
<th>Sarake 2</th>
<th>Sarake 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>Ensimmäinen asia: border-right-color saa säädettyä soluelementtien välisiä viivoja, border-left-color ei toimi edes !important avulla.
Toinen asia: jos border: hidden; tilalle laittaa border: 2px solid transparent; niin sitten linear-gradientilla tehty liukuvärjäys aiheuttaa sen, että liukuvärin viimeinen väri piirtyykin ensimmäisenä pikselirivinä soluun. Jos selitys on vähän epäselkeä, niin kannattaa vaan kokeilla. Toimii ainakin Firefoxilla että Chromella.
Firefox ja Chrome tosin ovat sitten keskenään eri mieltä siitä, miten pitkälle solujen reunaviivaa tulee piirtää: Chrome piirtää transparent-reunuksen päälle, Firefox ei. Toisaalta taas logiikka muuttuu käänteiseksi linear-gradientin kohdalla: Firefox piirtää transparentin reunuksen päälle solujen taustaa, Chrome ei. Voi jestas sentään näitä toteutuksien yksityiskohtien eroavaisuuksia... eron huomaa selkeästi laittamalla 2px sijasta reunukselle isomman koon.
Aihe on jo aika vanha, joten et voi enää vastata siihen.