Diskuze:

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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:

všechny řádky budou kousek od rámečku tabulky.
Všechny buňky (TH i TD) od sebe budou kousek do stran.
Řádky TD budou kousek od řádků TH zeshora.
Řá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

4.10.2014 19:22

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Michal Štěpánek

Člen

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

Zdeněk Pavlátka

Tvůrce

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.

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):4.10.2014 19:56

Tohle je pro mě složitější než návrh MVC aplikace
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

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Honza Bittner

Tvůrce

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.

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Jan Lupčík

Tvůrce

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č

Nahoru Odpovědět

4.10.2014 21:12

TruckersMP vývojář

Pavel Junek

Tvůrce

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 4.10.2014 21:47

Nahoru Odpovědět

4.10.2014 21:46

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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í.

Nahoru Odpovědět

5.10.2014 0:07

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Jan Lupčík

Tvůrce

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ář

Člen

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 5.10.2014 9:02

Nahoru Odpovědět

5.10.2014 9:01

Jan Lupčík

Tvůrce

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ář

Yahkem

Tvůrce

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

Yahkem

Tvůrce

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

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Neaktivní uživatel

Tvůrce

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 ?

Nahoru Odpovědět

5.10.2014 12:39

Neaktivní uživatelský účet

Zdeněk Pavlátka

Tvůrce

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.

Neaktivní uživatel

Tvůrce

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

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):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

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Neaktivní uživatel

Tvůrce

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

Diskuze: