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

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. Auf Nachfrage im Forum stellte NPage klar, dass diese Datei main.css CSS-Informationen für Formularfelder enthält.

Die Anpassung erfolgt:

bei eigenen Designs unter Design => Design-Einstellungen => CSS-Einstellungen vornehmen

bei Design-Vorlagen unter Design => Design-Einstellungen


Bewertung: (Keine Bewertung)

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