Problém s responsivní tabulkou – CSS – Fórum – Programujte.com

Dobrý den,
dělám responsivní tabulku s ceníkem na mé stránky. Našel jsem si návod jak to udělat. Když jí spustím normálně samotnou v obyčejném html souboru v počítači tak to funguje, ale jakmile jí přidám na stránky do wordpressu, tak to vůbec nezareaguje na změnu velikosti obrazovky a ani na mobilu se nezmění. Vůbec si nevím rady, budu vděčný za každou pomoc. Zde je tabulka aplikovaná na stránce .

Jak kód vypadá:
 

<!--[if !IE]><!-->
	<style>
	table.responsive { 
		width: 100%; 
		border-collapse: collapse; 
		font: 14px/1.4 Georgia, Serif; 
		color:black;
	}
	/* Zebra striping */
	table.responsive td:nth-of-type(odd) { 
		background: #F1F1F1; 
	}
	table.responsive th { 
		background: #31353D; 
		color: white; 
		font-weight: bold; 
		font-size:16px;
	}
	table.responsive td, th { 
		padding: 6px; 
		border: 1px solid #CCCCCC; 
		text-align: left; 
	}
	
	
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		table.responsive thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
	table.responsive td:nth-of-type(odd) { 
		background: none; 
	}
		
	table.responsive tr:nth-of-type(odd) { 
		background: #F1F1F1; 
	}	
		
		table.responsive tr { border: 1px solid #999999; }
		
		table.responsive td { 
			border: none;
			border-bottom: 1px solid #999999; 
			position: relative;
			padding-left: 50%; 
		}
		
		table.responsive td:before { 
			position: absolute;
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
			font-weight: bold;
		}
		
		table.responsive td:nth-of-type(1):before { content: attr(data-label); }
		table.responsive td:nth-of-type(2):before { content: attr(data-label); }
		table.responsive td:nth-of-type(3):before { content: attr(data-label); }
		table.responsive td:nth-of-type(4):before { content: attr(data-label); }
	}

@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}
	</style>
	<!--<![endif]-->

<h2 class="mujtext_h2" style="border-bottom:0px;">Ceník masáží:</h2>
<br>
<table class="responsive">
<thead>
	<tr>
		<th>Druh masáže</th>
		<th>Partie</th>
		<th>Délka</th>
		<th>Cena</th>
	</tr>
</thead>	
<tbody>
	<tr>
		<td data-label="Druh masáže">Klasická, sportovní, relaxační, baňková, zdravotní, reflexní</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">30min</td>
		<td data-label="Cena">350,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Klasická, sportovní, relaxační, baňková, zdravotní, reflexní</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">45min</td>
		<td data-label="Cena">490,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Klasická, sportovní, relaxační, baňková, zdravotní, reflexní</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">60min</td>
		<td data-label="Cena">590,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Klasická, sportovní, relaxační, baňková, zdravotní, reflexní</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">90min</td>
		<td data-label="Cena">750,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Klasická, sportovní, relaxační, baňková, zdravotní, reflexní</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">120min</td>
		<td data-label="Cena">990,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Medová detoxikační masáž</td>
		<td data-label="Partie">záda</td>
		<td data-label="Délka">60min</td>
		<td data-label="Cena">690,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Manuální lymfodrenáž</td>
		<td data-label="Partie">partie dle potřeby</td>
		<td data-label="Délka">60min</td>
		<td data-label="Cena">690,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Anticelulitidová masáž baňkou + zábal dle výběru (ozón/skořice/bahno)</td>
		<td data-label="Partie">problémové partie</td>
		<td data-label="Délka">90min</td>
		<td data-label="Cena">790,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Druh masáže">Čokoládová masáž se zábalem</td>
		<td data-label="Partie">celé tělo</td>
		<td data-label="Délka">90 - 120min</td>
		<td data-label="Cena">990-1490,- Kč</td>
	</tr>
</tbody>	
<table>
<br>

<table class="responsive">
<thead>
	<tr>
		<th>Navýšení kreditu při složení částky</th>
		<th>K tomu zdarma</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td data-label="Navýšení kreditu při složení částky">3000,- Kč</td>
		<td data-label="K tomu zdarma">+300,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Navýšení kreditu při složení částky">5000,- Kč</td>
		<td data-label="K tomu zdarma">+1000,- Kč</td>
	</tr>
	
	<tr>
		<td data-label="Navýšení kreditu při složení částky">10000,-Kč</td>
		<td data-label="K tomu zdarma">+3000,-Kč</td>
	</tr>
</tbody>	
</table>