Tutoriál HTML5 : Ako vytvoriť responzívnu tabuľku pomocou kaskádových štýlov s využitím media only screen

Ako vytvoriť responzívnu tabuľku pomocou kaskádových štýlov pomocou media only screen

Ak na každú webovú stránku ktorá je responzívna plánujeme zobrazovať údaje prostredníctvom tabuľky, musíme vytvoriť tabuľku responzívnu. Ak by sme tak nespravili a webová stránka by mala snahu sa prispôsobovať zmene veľkosti prehliadača, neresponzívna tabuľka by narušila celkový layout web stránky a mohla by ho celkom "rozhádzať". Všetky časti (elementy) webovej stránky, ktorá je responzívna, musia byť tiež responzívne. To platí aj pre tabuľku. V tomto článku si vytvoríme responzívnu tabuľku s využitím kaskádových štýlov. Vytvoríme si html súbor, v ktorom pomocou html značiek vytvoríme takúto tabuľku:

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Responsive Table</title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="css/style.css">
	

</head>

<body>

    
	<table>
		<thead>
		<tr>
			<th>Kadernícke služby DÁMY</th>
			<th>Krátke</th>
			<th>Polodlhé</th>
			<th>Dlhé</th>
		</tr>
		</thead>
	<tbody>
	<tr>
      <td>Strih (mytie,balzam,strih,fúkaná)</td>
      <td>15,00 €</td>
      <td>17,80 €</td>
      <td>21,00 €</td>
    </tr>
	<tr>
      <td>Fúkaná (mytie,balzam,fúkaná)</td>
      <td>10,00 €</td>
      <td>12,00 €</td>
      <td>13,40 €</td>
    </tr>
	<tr>
      <td>Žehlenie(mytie,balzam,fúkaná)</td>
      <td>12,50 €</td>
      <td>13,50 €</td>
      <td>25,50 €</td>
    </tr>
	<tr>
      <td>Farbenie(farba,mytie,balzam,fúkaná)</td>
      <td>20,00 €</td>
      <td>31,50 €</td>
      <td>44,00 €</td>
    </tr>
	<tr>
      <td>Farba + strih</td>
      <td>25,00 €</td>
      <td>37,30 €</td>
      <td>51,60 €</td>
    </tr>
	<tr>
      <td>Odfarbovanie a farbenie</td>
      <td>39,00 €</td>
      <td>49,00 €</td>
      <td>54,00 €</td>
    </tr>
	<tr>
      <td>Melír(melír, mytie,balzam,fúkaná)</td>
      <td>17,00 €</td>
      <td>22,00 €</td>
      <td>28,00 €</td>
    </tr>
	<tr>
      <td>- cez hrebeň</td>
      <td>13,00 €</td>
      <td>14,90 €</td>
      <td>16,60 €</td>
    </tr>
	<tr>
      <td>- cez alobal</td>
      <td>17,00 €</td>
      <td>18,50 €</td>
      <td>21,50 €</td>
    </tr>
	</tbody>
	</table>
		
</body>

</html>

Pri tvorbe tabuľky sme použili štandardné HTML značky. Ďalej si vytvoríme šablónu s kaskádovými štýlmi style.css a prepojíme ju s webovou stránku.

	/* 
	kaskádové štýly pre zobrazenie 
	tabuľky na bežnom počítači
	*/
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* zebrovanie - pozadie sa nastaví 
	na každý druhý riadok */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
	}
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		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; 
		}
		
		/* skryjeme záhlavie tabuľky, ale nie cez príkaz 
		display: none, kvôli prístupnosti  */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* hlavička tabuľky */
			position: absolute;
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		popis hlavičky 
		*/
		td:nth-of-type(1):before { content: "Kadernícke služby DÁMY"; }
		td:nth-of-type(2):before { content: "Krátke"; }
		td:nth-of-type(3):before { content: "Polodlhé"; }
		td:nth-of-type(4):before { content: "Dlhé"; }
	}

Výsledok: tabuľka v štandardnom a v responzívnom zobrazení:




Rubriky: