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
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
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
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 *
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 *
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 *
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: