Úvod » Divi šablona » Divi šablona responzivní tabulka

Divi šablona responzivní tabulka

Jak udělat responzivní tabulku v DIVI šabloně, DIVI theme

Respektive jak udělat responzivní tabulku ve WordPressu, protože šablona na tabulku zrovna pomocí tohoto způsobu mít vliv nebude, protože vytvoříme tabulku jednoduše pomocí klasického editoru, který by měl fungovat ve všech šablonách. Pokud nemáte ve WordPressu klasický editor, doinstalujte si jej pomocí pluginu a doinstalujte si také plugin TinyMCE Advanced pomocí, kterého si můžete vytvořit tabulku dle počtu sloupečků a řádků takřka na kliknutí.

Když budete mít tabulku hotovou, přepnete si editor (u DIVI frontend editace z Vizuální na Text) u Klasického editoru přepnete na stránce z Editor na HTML a uvidíte něco podobného jako tento kód  <table width=“280″ height=“112″>

můžete zkusit nahradit tímto kódem <table class=“responsive“>

Dalším krokem je, že do CSS stylů vložíte ještě tento kód:

@media only screen and (max-width: 840px) {
table.responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}

Níže je nastíněno jak se zobrazují tabulky, při původním kódu a s novou úpravou

Neupravený kód, tabulka není responzivní:

<table width=“280″ height=“112″>
<tbody>
<tr>
<td style=“width: 63.2px;“>Název</td>
<td style=“width: 63.2px;“>Barva</td>
<td style=“width: 64px;“>Cena</td>
<td style=“width: 64px;“>Popis</td>
</tr>
<tr>
<td style=“width: 63.2px;“>položka A</td>
<td style=“width: 63.2px;“>modrá</td>
<td style=“width: 64px;“>100.000 Kč</td>
<td style=“width: 64px;“>tady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text</td>
</tr>
<tr>
<td style=“width: 63.2px;“>položka B</td>
<td style=“width: 63.2px;“>žlutá</td>
<td style=“width: 64px;“>120.000 Kč</td>
<td style=“width: 64px;“>tady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text</td>
</tr>
</tbody>
</table>

Tabulka bez upraveného kódu neresponzivní:

NázevBarvaCenaPopis
položka Amodrá100.000 Kčtady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text
položka Bžlutá120.000 Kčtady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text

 

Upravený kód pro tabulku:

<table class=“responsive“>
<tbody>
<tr>
<td style=“width: 63.2px;“>Název</td>
<td style=“width: 63.2px;“>Barva</td>
<td style=“width: 64px;“>Cena</td>
<td style=“width: 64px;“>Popis</td>
</tr>
<tr>
<td style=“width: 63.2px;“>položka A</td>
<td style=“width: 63.2px;“>modrá</td>
<td style=“width: 64px;“>100.000 Kč</td>
<td style=“width: 64px;“>tady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text</td>
</tr>
<tr>
<td style=“width: 63.2px;“>položka B</td>
<td style=“width: 63.2px;“>žlutá</td>
<td style=“width: 64px;“>120.000 Kč</td>
<td style=“width: 64px;“>tady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text</td>
</tr>
</tbody>
</table>

 

Tabulka pomocí upraveného kódu:

NázevBarvaCenaPopis
položka Amodrá100.000 Kčtady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text
položka Bžlutá120.000 Kčtady napíšeme nějaký popisek a vůbec teď nevím co se mám psát, hlavně, aby to byl dlouhý text
Radka

Radka

Moje motto: „Tvorba webových stránek ubírá mi spánek“. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát „blog“, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.

Máte problém s webem?

Objednejte si mé služby:

tel.: 734332360