Datentabellen kommen mit responsivem Design nicht besonders gut zurecht. Leider gibt es diesen Moment. Beim Responsive Design geht es darum, Ihr Design an unterschiedliche Bildschirmgrößen anzupassen. Was passiert also, wenn der Bildschirm schmaler als die Mindestbreite der Datentabelle ist? Sie können herauszoomen und die gesamte Tabelle sehen, aber der Text ist dann zu klein zum Lesen. Oder Sie können den Lesepunkt vergrößern, müssen aber (leider) vertikal und horizontal scrollen, um die Tabelle anzuzeigen. Datentabellen können sehr umfangreich sein und sind es sicherlich auch. Tabellen können in der Breite flexibel gestaltet werden (Gewicht = 100 %), der Inhalt der Zellen kann jedoch so schmal werden, dass er einfach nicht mehr sichtbar ist.

Um diesen unangenehmen Moment zu vermeiden, werden adaptive Tabellen verwendet. Eine solche Tabelle zeigt eine horizontale Bildlaufleiste an, wenn der Bildschirm zu klein ist, um den gesamten Inhalt anzuzeigen.

Um eine responsive Tabelle zu erstellen, fügen Sie ein Containerelement hinzu overflow-x:auto um

Notiz. In OS

Adaptive Websites sind schon lange kein Kuriosum mehr und werden immer häufiger eingesetzt. Betrachtet man die neuesten Nachrichten mit Suchmaschinenrankings (falls jemand es nicht weiß, haben responsive Websites bei der Suche über ein mobiles Gerät Vorrang), wird die Zahl solcher Websites weiter zunehmen. Sie können gegen die Adaption für mobile Geräte sein oder dafür, aber die Tatsache bleibt bestehen: Immer mehr Kunden fordern, dass ihre Website anpassungsfähig ist, und Webmaster müssen dies tun.

Eines der Hauptprobleme bei der Anpassung einer Site an unterschiedliche Auflösungen sind Tabellen. Vor allem, wenn sie viele Daten enthalten. Schauen wir uns zwei Möglichkeiten an, eine responsive Tabelle zu gestalten.

Schauen wir uns zunächst an, wie die Tabelle aussieht:

Seien wir ehrlich: Eine solche Tabelle kann nicht als wirklich anpassungsfähig bezeichnet werden. Auf Mobilgeräten sieht es gut aus, nirgendwo ragt etwas hervor und das Layout der Website ist nicht „fließend“. Diese Methode eignet sich gut, wenn Tabellen auf Ihrer Website selten sind und es keinen Sinn macht, ein Plugin anzuschließen und deswegen zusätzliche Stile zu schreiben. Diese Methode wird von Bootstrap verwendet. Wie funktioniert das?

Es ist ganz einfach: Die Tabelle wird in ein Div eingeschlossen, das auf eine maximale Breite von 100 % und Überlauf: Auto eingestellt ist.

Wenn der Tisch lang ist, können Sie auch die maximale Höhe festlegen und den Tabellenkopf fixieren.

Das Ergebnis, wie das folgende Beispiel, kann auf dieser Seite eingesehen werden.

Wenn Sie häufig Tabellen auf Ihrer Website haben, ist es sinnvoll, das Footable-Plugin zu verwenden.

Zuerst müssen Sie das Plugin verbinden (auf GitHub herunterladen oder über ein CDN verbinden) und es auch initialisieren:

$(function() ( $(".table").footable(); ));

Hier müssen wir etwas klarstellen: Aus irgendeinem Grund zählt das Skript nicht die Breite des Ansichtsfensters, sondern die Breite der Tabelle. Um dies zu beheben, müssen Sie das Skript leicht „modernisieren“:

JQuery(function () ( jQuery(".table").footable(( berechneWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

Bei der Initialisierung geben wir die Tabellenklasse oder nur das Tabellen-Tag an, wenn alle Tabellen auf der Site adaptiv sein sollen.

Was bedeutet das alles? Auf Tablets werden die Spalten „RAM“, „Diagonal“, „PPI“ und „Akku“ ausgeblendet. Bei der Reduzierung auf Telefone wird auch die Spalte „Preis“ hinzugefügt.

Bei der Initialisierung können Checkpoints angegeben werden:

JQuery(function () ( jQuery(".table").footable(( berechneWidthOverride: function() ( return (width: jQuery(window).width()); ), Haltepunkte: ( Mobil: 0, Tablet: 720, Desktop: 1024 ) ));

Das bedeutet, dass die Regel im Bereich 0–720 für Mobilgeräte, 720–1024 für Tablets und über 1024 für Desktops gilt. Nichts hindert Sie daran, bei Bedarf noch mehr Regeln zu erstellen.

Sie können auch sicherstellen, dass einige Spalten standardmäßig erweitert werden. Geben Sie dazu das Datenattribut data-expanded="true" an

Die Möglichkeiten des Plugins enden hier nicht, aber sie reichen völlig aus, um adaptive Tabellen zu erstellen. Wir werden uns beim nächsten Mal andere Möglichkeiten ansehen.

Windows: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome/Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Wenn eine HTML-Tabelle zu viele Daten enthält, wird sie größer als der verfügbare Platz auf der Seite und beginnt überzulaufen. Um Abhilfe zu schaffen, können Sie der Tabelle horizontales Scrollen hinzufügen. Beispiel:

HTML/XHTML. Code:

1

2

3

4

5

6

7

8

9

10

Table_data_1

Table_data_2

Table_data_3

Table_data_4

Table_data_5

Table_data_6

Table_data_7

Table_data_8

Table_data_9

Table_data_10

Tabelle (Anzeige: Block; Überlauf-x: Auto;)

/* Zusätzliches CSS, nur um dem Beispiel etwas Aussehen zu verleihen: */

Tabelle (border-collapse:collapse;)

Tabelle td,th (Auffüllung: 10 Pixel; Rand: 1 Pixel #000 fest;)

Hinweis: Die CSS-Eigenschaft display:block sorgt dafür, dass die Tabelle nur so viel Breite einnimmt, wie sie benötigt, um die Daten ohne visuelle Verzerrung aufzunehmen. Nicht mehr, ohne sich über die gesamte Breite des verfügbaren Platzes auf der Seite auszudehnen. Auch wenn width: 100 % zum CSS-Code hinzugefügt wird. Beispiel:

Aliosque Untertitel und Thema

Es gibt viele Online-Dienste zum Erstellen von sitemap.xml. Sie können dies jedoch auch selbst auf Ihrem Computer mit dem Lynx-Browser und mehreren Linux-Befehlszeilendienstprogrammen tun. Das Folgende ist ein Beispiel für ein Bash-Skript namens „sitemap.sh“, das sie verwendet. Bash-Skript, das die Datei sitemap.xml erstellt: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | sortieren | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/