Scrollbare Tabelle mit Kopf

Eine andere Möglichkeit, Webseiten mit Tabellen übersichtlicher zu gestalten besteht darin, eine Scroll-Leiste einzubauen.

Spalte 1 Spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 2 spalte 2
zeile 3 spalte 2
zeile 4 spalte 2
zeile 5 spalte 2
zeile 6 spalte 2

Der Trick besteht einfach in einer etwas besseren Ausnutzung des HTML-Codes für Tabellen. Der Quellcode für dieses Beispiel sieht so aus:

<table border="1" style="width: 450px;">
    <thead>
        <tr>
            <th width="150">Spalte 1</th>
            <th width="150">Spalte 2</th>
        </tr>
    </thead>
    <tbody style="overflow: scroll; height: 150px;">
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 2</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 3</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 4</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 5</td>
            <td width="150">spalte 2</td>
        </tr>
        <tr style="height: 15px;">
            <td width="150">zeile 6</td>
            <td width="150">spalte 2</td>
        </tr>
    </tbody>
</table>

 

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Diese Frage stellte eine NPage Nutzerin im Forum:

http://forum.npage.de/sonstige-extras/40648-galerie-den-news.html

Ich habe das getestet. In der Kurzversion der News klappt es zwar nicht, aber in der vollständigen Version geht es.

[galerie_380505]

 


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang