[Übersicht]
Tutorials > CSS > Responsive Tabelle  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

In diesem kleinen Beispiel werden je nach Bildschirmbreite die Spalten der Tabelle ausgeblendet.
So werden weniger wichtige Zusatzinformartionen auch nur gezeigt, wenn ausreichend Platz vorhanden ist.

Dazu werden die Spalten mit CSS-Klassen versehen, welche mit der Bildschirmbreite in Pixel verknüpft werden.
So können mit einer Anweisung direkt ganze Spalten angesprochen werden.

Damit der Browser diese Anweisungen korrekt interpretieren kann, muss zuerst der Viewport ausgewiesen werden.
Dieser bezeichnet den sichtbaren Bereich und wie damit umgegangen werden soll:


<meta name="viewport" content="width=device-width, initial-scale=1.0">


Hier folgt die Tabelle:










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
<table style="width: 100%;" border="1">
<tr>
<th class="spalte_1">Spalte 1</th>
<th class="spalte_2">Spalte 2</th>
<th class="spalte_3">Spalte 3</th>
<th class="spalte_4">Spalte 4</th>
<th class="spalte_5">Spalte 5</th>
<th class="spalte_6">Spalte 6</th>
</tr>
<tr>
<td class="spalte_1">immer</td>
<td class="spalte_2">immer</td>
<td class="spalte_3">450px Min</td>
<td class="spalte_4">600px Min</td>
<td class="spalte_5">750px Min</td>
<td class="spalte_6">900px Min</td>
</tr>
<tr>
<td class="spalte_1">immer</td>
<td class="spalte_2">immer</td>
<td class="spalte_3">450px Min</td>
<td class="spalte_4">600px Min</td>
<td class="spalte_5">750px Min</td>
<td class="spalte_6">900px Min</td>
</tr>
</table>


Das einzige was nun noch fehlt, sind die CSS-Anweisungen,
dass die Spalten bis zu einer gewissen Bildschirmbreite unsichtbar sein sollen.
Ist die Bedingung nicht erfüllt, werden sie ganz normal angezeigt.










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
<style type="text/css">

@media screen and (max-width: 900px)
{
.spalte_6
{
display: none;
visibility: hidden;
}
}

@media screen and (max-width: 750px)
{
.spalte_5
{
display: none;
visibility: hidden;
}
}

@media screen and (max-width: 600px)
{
.spalte_4
{
display: none;
visibility: hidden;
}
}

@media screen and (max-width: 450px)
{
.spalte_3
{
display: none;
visibility: hidden;
}
}

</style>