|
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
|
| [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:
1
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
Hier folgt die Tabelle:
1
2
3
4
5
6
7
8
9
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.
1
2
3
4
5
6
7
8
9
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>
|
|
|
