FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Martin Konečný
Tvůrce
Avatar
Martin Konečný:4.10.2014 19:22

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
 
Odpovědět
4.10.2014 19:22
Avatar
Michal Štěpánek
Člen
Avatar
Odpovídá na Martin Konečný
Michal Štěpánek:4.10.2014 19:26

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
Tvůrce
Avatar
Odpovídá na Martin Konečný
Zdeněk Pavlátka:4.10.2014 19:35

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ý
Tvůrce
Avatar
Martin Konečný:4.10.2014 19:56

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
Tvůrce
Avatar
Odpovídá na Martin Konečný
Honza Bittner:4.10.2014 20:13

Zkus taky

border-spacing: [velikost];
Nahoru Odpovědět
4.10.2014 20:13
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Martin Konečný
Tvůrce
Avatar
Odpovídá na Honza Bittner
Martin Konečný:4.10.2014 20:19

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

 
Nahoru Odpovědět
4.10.2014 20:19
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Martin Konečný
Jan Lupčík:4.10.2014 21:12

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

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
4.10.2014 21:12
TruckersMP vývojář
Avatar
Pavel Junek
Tvůrce
Avatar
Odpovídá na Martin Konečný
Pavel Junek:4.10.2014 21:46

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
 
Nahoru Odpovědět
4.10.2014 21:46
Avatar
Martin Konečný
Tvůrce
Avatar
Odpovídá na Jan Lupčík
Martin Konečný:5.10.2014 0:07

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
Martin Konečný
Tvůrce
Avatar
Odpovídá na Pavel Junek
Martin Konečný:5.10.2014 0:10

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
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Martin Konečný
Jan Lupčík:5.10.2014 7:10

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

Nahoru Odpovědět
5.10.2014 7:10
TruckersMP vývojář
Avatar
00
Člen
Avatar
Odpovídá na Martin Konečný
00:5.10.2014 9:01

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
 
Nahoru Odpovědět
5.10.2014 9:01
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na 00
Jan Lupčík:5.10.2014 9:55

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
TruckersMP vývojář
Avatar
Yahkem
Tvůrce
Avatar
Yahkem:5.10.2014 10:47

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
Tvůrce
Avatar
Odpovídá na Yahkem
Yahkem:5.10.2014 10:57

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ý
Tvůrce
Avatar
Martin Konečný:5.10.2014 12:26

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Martin Konečný
Neaktivní uživatel:5.10.2014 12:39

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
5.10.2014 12:39
Neaktivní uživatelský účet
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Zdeněk Pavlátka:5.10.2014 12:50

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Neaktivní uživatel:5.10.2014 12:51

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
Neaktivní uživatelský účet
Avatar
Martin Konečný
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Martin Konečný:5.10.2014 12:54

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Martin Konečný
Neaktivní uživatel:5.10.2014 18:24

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
Neaktivní uživatelský účet
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.