Diskuze:

HTML a CSS HTML a CSS American English version English version

Avatar
Martin Konečný (pavelco1998):

Edit: může někdo z moderátorů doplnit název vlákna?

Ahoj,

prosím někoho, kdo umí s CSS, aby mi poradil. Potřebuji udělat tabulku, kde:

  1. všechny řádky budou kousek od rámečku tabulky.
  2. Všechny buňky (TH i TD) od sebe budou kousek do stran.
  3. Řádky TD budou kousek od řádků TH zeshora.
  4. Řádky TD budou ihned pod sebou.

Výsledně by to mělo vypadat nějak tak, jako je na obrázku.

S tímto CSS se mi podařilo udělat všechno kromě bodu č. 3):

table.striped {
        border: 1px solid #070606 !important;
        border-spacing: 1px 0;
        padding: 2px 1px;
}

table.striped th, table.striped td {
        padding: 2px;
}

table.striped tr.head {
        background-color: #000;
        color: #918c84;
        text-align: center;
}

HTML pak vypadá takto:

<table class="striped">
  <tr class="head">
    <th>Nadpis 1</th>
    <th>Nadpis 2</th>
  </tr>

  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Můžete mi někdo poradit, jak odsadit řádky s TD od řádku s TH?

Editováno 4.10.2014 19:24
 
Odpovědět  +1 4.10.2014 19:22
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Michal Štěpánek:

pro tenké linky použij

border collapse:collapse
Nahoru Odpovědět 4.10.2014 19:26
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Zdeněk Pavlátka:

Třetí bod pojmi jako mezeru pod th, ne jako mezeru nad td ;)

Nahoru Odpovědět 4.10.2014 19:35
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Martin Konečný (pavelco1998):

Tohle je pro mě složitější než návrh MVC aplikace :D
Ať se snažím vymyslet cokoliv, mezeru mezi TH a TD prostě udělat nedokážu.

border-collapse dle googlu funguje pouze na samotnou tabulku (table). Když to použiji, nedokážu udělat žádné mezery.
Margin na buňky také nefunguje a jiný způsob mě vážně nenapadá. Dávat tam nějaký border, který bude mít stejnou barvu jako pozadí, mi nepřijde jako vhodné řešení (na stackoverflow to někdo navrhoval).

 
Nahoru Odpovědět 4.10.2014 19:56
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 4.10.2014 20:13
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Martin Konečný (pavelco1998):

border-spacing již mám u tabulky nastaveno. To mi udělá bod č. 1).

 
Nahoru Odpovědět 4.10.2014 20:19
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
IT Man:

A nebude prostě jednodušší si udělat 2 tabulky? :)

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 4.10.2014 21:12
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Pavel Junek
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Pavel Junek:

Teď mě něco napadlo. Nejlepší řešení to určitě nebude, ale funguje to :).
Udělěj si mezi tagy td ještě jeden td a nastav mu border na 0.

Editováno 4.10.2014 21:47
 
Nahoru Odpovědět 4.10.2014 21:46
Avatar
Odpovídá na IT Man
Martin Konečný (pavelco1998):

Jednodušší by to asi bylo, ale rád bych to udělal v rámci jedné tabulky. Nějak to jít musí. :D

 
Nahoru Odpovědět 5.10.2014 0:07
Avatar
Odpovídá na Pavel Junek
Martin Konečný (pavelco1998):

Nějaké čachry s borderem mě také napadly a někdo to nějak podobně navrhoval na stackoverflow, nicméně bych to rád udělal nějak "čistě".
Ještě chvíli počkám, jestli někoho nenapadlo řešení, které by se mi líbilo.

Dá se tu označit víc odpovědí, které vyřešily problém (když se to dá řešit více způsoby)? Nechtěl bych to případně označovat jen jednomu, když mi pomohlo více lidí.

 
Nahoru Odpovědět 5.10.2014 0:10
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
IT Man:

Ne, bohužel můžeš označit jenom jednu jako správnou odpověď :(

Nahoru Odpovědět 5.10.2014 7:10
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
00
Člen
Avatar
Odpovídá na Martin Konečný (pavelco1998)
00:

Možná to nepůjde (píšu to nezkoušené), ale mohl bys zkusit tohle (s úpravou)

td
{
display: inline-block;
margin-right: 100px;
}

tr
{
display: block;
margin: 0px;
}

thead
{
display: block;
margin-bottom: 100px;
}

Nikdy jsem to nepoužil
EDIT2: Z hlavy
// EDIT3: píšu to

Editováno 5.10.2014 9:02
 
Nahoru Odpovědět 5.10.2014 9:01
Avatar
IT Man
Redaktor
Avatar
Odpovídá na 00
IT Man:

Místo krásného vyzdobení textu si mohl použít lehce a jednoduše tlačítko code. :)

Nahoru Odpovědět 5.10.2014 9:55
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Yahkem
Redaktor
Avatar
Yahkem:

Asi ti moc nepomůžu, ale imho nejjednodušší je buď vložit prázdný řádek do HTML, nebo přidat něco jako tohle do stylů:

tr.head th{
        border-bottom: 15px solid white;
}
 
Nahoru Odpovědět 5.10.2014 10:47
Avatar
Yahkem
Redaktor
Avatar
Odpovídá na Yahkem
Yahkem:

Případně tohle:

table.striped tr:nth-child(2) td {
        border-top: 15px solid transparent;
}

Ať nemusíš měnit barvu pokaždé, když změníš barvu pozadí

 
Nahoru Odpovědět 5.10.2014 10:57
Avatar
Martin Konečný (pavelco1998):

Chlapi díky za nápady. Nejjednodušší se zdá přidat jeden řádek s prázdným <td>, který udělá mezeru. Budu teď doufat, že se to nerozbije.

 
Nahoru Odpovědět 5.10.2014 12:26
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Jiří Gracík:

Hele a proč jsi nedal tomu řádku s TH margin zespodu? Nebo TR, ve kterém jsou TH, margin/padding zespod :D?

Nahoru Odpovědět  +1 5.10.2014 12:39
Creating websites is awesome till you see the result in another browser ...
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
Zdeněk Pavlátka:

K tomu sem se ho snažil dotlačit ;) holt to nefungovalo.

Nahoru Odpovědět 5.10.2014 12:50
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
Jiří Gracík:

Já osobně jsem to z tvého komentáře nepochopil. Teď už o s dovysvětlením částečně pobírám :)

Nahoru Odpovědět 5.10.2014 12:51
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Martin Konečný (pavelco1998):

Margin jsem tam zkoušel dát, ale bohužel nefungoval. Nezkoušel jsem teda změnit hodnotu atributu display, tak nevím, zda by to nemělo nějaký účinek.

 
Nahoru Odpovědět 5.10.2014 12:54
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Jiří Gracík:

Nemám tušení, jaké jsou elementy tabulky, ale možná to vliv mít bude.

Nahoru Odpovědět 5.10.2014 18:24
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 21 zpráv z 21.