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í:

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: