[Übersicht]
Tutorials > CSS > Responsive Tabelle  

  Javascript
   WebAudio Player
   Beim Scrollen nachladen
     Canvas
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation
      Lichtjockey
  HTML
   HTML 5 Grundgeruest
  CSS
   Responsive Tabelle



php


[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>