Jak vytvořit responzivní tabulku, která obsahuje obrázky?

verified

(23 hodnocení)

24. 11. 2016 22:42:28

Zdravím,

je tu někdo kdo mi dokázal poradit s responsive tabulkou? Budou tam obrázky.

<table style="border: 1px solid #fff;width: 940px;">
<tbody>

<tr>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK1.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK2.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK3.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK4.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK5.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK6.jpg"></a></th>
  <th style="width: 100%"><a href="#"><img src="OBRAZEK7.jpg"></a></th>
</tr>

<tr>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 1</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 2</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 3</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 4</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 5</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 6</td>
  <td style="color: #444645;letter-spacing: 3px;padding: 20px;text-align: center;font-size: 15px;">TEXT 7</td>
</tr>

<tr>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: #ff7b14;padding: 20px;text-align: center;font-size: 12px;"></td>
  <td style="color: red;padding: 20px;text-align: center;font-size: 12px;">Již brzy</td>
</tr>

</tbody>
</table>

Když tam dám obrázek, půjde to nějak udělat na responzive tabulku?

Díky

24. 11. 2016 22:42:28

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239392

verified

25. 11. 2016 09:37:04

Respektive chceš aby ta tabulka byla responzivní? To byl u tabulek vždycky problém (mrkni třeba na zetor.cz tabulky jak se to dá podělat). Tu tvou obal třeba do:

Tabulka...

Při menší šířce rodiče než je 940px se dá tabulkou rolovat do stran. Osobně ale nevím k čemu tabulka. Budou tam tabulková data? Mohl bys mi říct jaká data tam budou a pak snad poradím lépe.

25. 11. 2016 09:37:04

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239391

verified

(23 hodnocení)

25. 11. 2016 11:08:39

Napsal lexlexter;1341739
respektive chceš aby ta tabulka byla responzivní? To byl u tabulek vždycky problém (mrkni třeba na zetor.cz tabulky jak se to dá podělat). Tu tvou obal třeba do:
Při menší šířce rodiče než je 940px se dá tabulkou rolovat do stran. Osobně ale nevím k čemu tabulka. Budou tam tabulková data? Mohl bys mi říct jaká data tam budou a pak snad poradím lépe.

sz :)

25. 11. 2016 11:08:39

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239390

verified

(26 hodnocení)

1. 12. 2016 01:07:22

Nemohl bys nahrát příklad kódu? Z tohohle těžko vyvěštím, co máš vlastně za problém, nicméně v dnešní době doporučuji nahradit tabulky používáním flexboxu, podporují ho všechny moderní prohlížeče a dává daleko víc možností: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1. 12. 2016 01:07:22

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239389

verified

(13 hodnocení)

1. 12. 2016 14:29:08

Responsive Data Tables | CSS-Tricks

1. 12. 2016 14:29:08

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239388

verified

(26 hodnocení)

1. 12. 2016 20:11:26

Podívej se na datum toho příspěvku. 5 let je hrozně dlouhá doba. Používejte flexbox, tabulky má dnes smysl používat už jen ze sémantických důvodů.

1. 12. 2016 20:11:26

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/jak-vytvorit-responzivni-tabulku-ktera-obsahuje-obrazky/#reply1239387

Pro odpověď se přihlašte.

Prodej Více

NaBurzu.cz + Na-burzu.cz – 2 atraktivní .CZ domény pro burzy, investování, obchodování a inzertní portály

27 990 Kč

0 příhozů

eshop na prodej pneumatik pro Tesla

50 000 Kč

0 příhozů

Prodej zavedené půjčovny lodí (kanoe, rafty) v jižních Čechách

5 900 000 Kč

0 příhozů

Prodej realhit.cz inzertního portálu

1 900 000 Kč

0 příhozů

Prodej e-shopu Nejlevnejsivyziva.cz – sport a turistika

10 890 000 Kč

0 příhozů

Poptávky Více

Poptávka stolních PC, monitorů a kancelářského softwaru

Hledáme fotografa na focení dárkových krabiček v Pardubicích

Poptávka: Fotograf/ka na rodinné focení v MB

Poptávka: Fotograf na rodinné focení v Brně

Hledám kameramana na promo video v Tišnově

Pracovní nabídky Více

Junior IT Analyst

Hradec Králové, Pardubice

Backend vývojář systémového jádra (C++/Python)

Brno, Práce z domu

Junior Developer Python / Django / AI projekty

Práce z domu, Praha

Junior Project Manager

IT Security Officer

Hradec Králové, Praha

Nabídky Více

Tvorba webových aplikací a MVP pomocí AI – od nápadu po funkční řešení

Spravuju Google Ads pro e-shopy a firmy. Nejdřív zjistím, kam vám teď mizí peníze, a řeknu to bez obalu.

⭐Reálné a trvalé RECENZE, které prodávají – Google, Seznam, Facebook…

⭐ MadKoala.one – Full-Stack vývoj, kde má všechno řešení ⭐ Weby • systémy • AI • automatizace • aplikace

Taxera: účetnictví pro OSVČ a malé i střední s.r.o. | portál v ceně