Autor | Zpráva | ||
---|---|---|---|
Dusann Profil |
Prečo sa farba pozadia bunky v tabuľke vyplňuje na celú výšku row a nie iba na výšku samotnej bunky ?
HTML: <table> <thead> <tr> <th>header</th> </tr> </thead> </table> CSS: table{ line-height:20px; } th{ background-color:red; } tr{ height:30px; background-color:green; } V uvedenom príklade očakávam, že červená plocha bude vysoká iba 20px a 5px nad textom + 5px pod textom bude plocha zelená. Avšak výška celej plochy (row) je červená. |
||
Bubák Profil |
#2 · Zasláno: 2. 2. 2016, 21:13:09
Výsledek je podle (mého) očekávání. Všechny buňky v řádku tabulky jsou stejně vysoké a výška odpovídá řádku tabulky. Trochu jsem vysvětlení zjednodušil vynecháním povídání o cellpaddingu, cellspacingu a borderu.
Nevím, čeho přesně chceš dosáhnout, protože jsi, celkem pochopitelně, dal silně zjednodušenou ukázku. Jedno z řešení je deklarovat buňkám th border. Jiné řešení je vložit do buněk ht další element, třebas div. |
||
Dusann Profil |
Bubák:
„Všechny buňky v řádku tabulky jsou stejně vysoké a výška odpovídá řádku tabulky“ Práve toto neplatí. Napr. v uvedenej ukážke má bunka výšku 20px a riadok tabuľky 30px. |
||
Lonanek Profil |
#4 · Zasláno: 2. 2. 2016, 22:16:25
Dusann:
„Práve toto asi neplatí.“ Jestli to není tím, že u tagu <tr> se zpravidla výška ani šířka nenastavuje. Výška řádku je dána největší výškou buňky v řádku. Viz. Ukázka. |
||
Dusann Profil |
#5 · Zasláno: 2. 2. 2016, 23:31:57
Dusann:
„Prečo sa farba pozadia bunky v tabuľke vyplňuje na celú výšku row a nie iba na výšku samotnej bunky ?“ Ono to vlastne má logiku. Ak by existovali aj bunky s viacriadkovým textom, tak bunky s jednoriadkovým textom by neboli kompletne vyfarbené... |
||
anonymníí Profil * |
#6 · Zasláno: 3. 2. 2016, 08:28:04
Lonanek:
„Jestli to není tím, že u tagu <tr> se zpravidla výška ani šířka nenastavuje.“ Zpravidla, zpravidla... Výška nastavit jde a je to validní požadavek, není důvod jej nerespektovat. Dusann: „Práve toto neplatí. Napr. v uvedenej ukážke má bunka výšku 20px a riadok tabuľky 30px.“ Nenastavuješ výšku, nastavuješ výšku řádku textu. To je rozdíl. Zjednodušeně řečeno, jak velká bude mezera mezi řádky víceřádkového textu (jestli na sebe bude nalepený či bude vzdušný). Ale i kdybys nastavil výšku buňce a řádku, a tyto výšky by byly rozdílné, použije se větší z nich. Pokud bude obsah buňky vyšší, použije se reálná výška buňky. |
||
Dusann Profil |
anonymníí:
> Dusann: > „Práve toto neplatí. Napr. v uvedenej ukážke má bunka výšku 20px a riadok tabuľky 30px.“ „Nenastavuješ výšku, nastavuješ výšku řádku textu. To je rozdíl.“ To mi je jasné. Ale v konkrétnom prípade má bunka výšku 20px pretože tam nie je žiadny padding a obsahom je jeden line-box. Pri použití farby pozadia bunky sa ale zafarbí celá výška riadku tabuľky, tj 30px. |
||
anonymníí Profil * |
#8 · Zasláno: 3. 2. 2016, 12:04:18
Dusann:
„Ale v konkrétnom prípade má bunka výšku 20px“ Nemá. Ty se sice snažíš tenhle rozměr nastavit, ale v reálu má 30px na výšku. Protože platí to, co jsem napsal v #6 na konci, ta poslední věta. |
||
Dusann Profil |
anonymníí:
Ak v uvedenej ukážke pridáš pre bunku napr. top-padding 10px, tak výška riadku tabuľky stále ostane na 30px. Z čoho dedukujem, že výška bunky pred aplikovaním paddingu je 20px. |
||
anonymníí Profil * |
#10 · Zasláno: 3. 2. 2016, 13:32:36
Dusann:
Ne. Před pridáním paddingu je výška řádku i buňky 30px. Po přidání 10px paddingu je výška řádku 30px, výška buňky také (20px + 10px). Text bude odsazený o 10px shora. Pokud bys přidal padding 20px, výška řádku bude rázem také 40px. |
||
Časová prodleva: 7 let
|
0