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

Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 3 >

Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 
Inhalt unter der Menüleiste (07.06.2013 00:09:00)

Auch bei einer Npage Designvorlage ist es möglich, unter der Menüleiste noch zusätzlichen Inhalt unterzubringen. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 
Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

Zum Seitenanfang