Adaptive Websites sind schon lange kein Kuriosum mehr und werden immer häufiger eingesetzt. Berücksichtigung der neuesten Nachrichten mit Rankings Suchmaschinen(Falls jemand es nicht weiß: Bei der Suche auf einem mobilen Gerät werden responsive Websites bevorzugt.) Die Anzahl solcher Websites wird weiter zunehmen. Man kann der Anpassung unter entgegenstehen mobile Geräte oder dafür sein, 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 Layoutmethoden an adaptiver Tisch.

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, nichts ragt irgendwo 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. Beim nächsten Mal werden wir uns andere Möglichkeiten ansehen.

Für jeden Layouter ist es kein Geheimnis, dass Tabellen böse sind. Sie lassen sich nur schwer anpassen und anpassen. Wenn es auf der Desktop-Version der Site immer noch recht einfach ist, eine Tabelle zu erstellen, geht mit Beginn des adaptiven Layouts alles zur Hölle.

Tatsächlich besteht eine der effektivsten Optionen darin, einen horizontalen Bildlauf für die Tabelle zu erstellen. Es ist nicht schwer, aber darum geht es im heutigen Beitrag nicht. Ich werde es Ihnen jedoch zeigen.

Lassen Sie uns das Ganze gestalten (hauptsächlich müssen wir die Tischdecke gestalten).

Table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) @media screen und (max-width: 600px) ( .table-wrap ( overflow-y: scroll; ) )

Dies führt dazu, dass bei einer Breite von BIS ZU 600 Pixeln die Tabelle scrollt, die Site jedoch nicht. Praktisch, aber heute möchte ich über etwas anderes sprechen.
Ich habe einen weiteren interessanten Ansatz zur Tischreaktivität gefunden. Es besteht aus der Verwendung von Datenattributen und Pseudoklassen. Jetzt zeige ich dir alles.

Ändern wir zunächst das Markup:

Wir haben jeder Spalte ein Datenbeschriftungsattribut gegeben, das uns in Zukunft nützlich sein wird.

Legen Sie die Grundstile fest:

Körper ( Textausrichtung: Mitte; Polsterung oben: 10 %; Schriftfamilie: serifenlos; Hintergrundbild: URL("bg.jpg"); Hintergrundgröße: Abdeckung; Höhe: 100vh; Farbe: #fff ; ) .table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( border: 1px solid #ccc; width: 100% ; margin:0; padding:0; border-collapse: border-spacing: 0; table tr ( border: 1px solid #ddd; padding: 5px; ) table th, table td ( padding: 10px; text-align : center; border-right: 1px solid #ddd; ) Tabelle th ( Farbe: #fff; Hintergrundfarbe: #444; Texttransformation: Großbuchstaben; Schriftgröße: 14px; Buchstabenabstand: 1px; )

Es sieht aus wie eine normale Tabelle. Wenn wir die Site um 320-420 Pixel verschieben, sehen wir natürlich einen horizontalen Bildlauf der gesamten Site. Nicht der Punkt.

Wie kann man das beheben? Stile hinzufügen:

@media screen and (max-width: 600px) ( table ( border: 0; ) table thehead ( display: none; ) table tr ( margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; ) Tabelle td ( Anzeige: Block; Textausrichtung: rechts; Schriftgröße: 13 Pixel; Rand unten: 1 Pixel gepunktet #ccc; Rand rechts: 1 Pixel durchgehend transparent; ) Tabelle td:last-child ( Rand unten: 0; ) Tabelle td:before ( Inhalt: attr(Datenbeschriftung); Float: links; Texttransformation: Großbuchstaben; Schriftstärke: fett; ) )

Hier haben wir die Tabellenzeilen blockartig gestaltet, die Spaltennamen entfernt und den Text der Spalten selbst rechtsbündig ausgerichtet. Mithilfe der Pseudoklasse :before hängen wir wiederum unsere Datumsattribute an den linken Rand an. Es stellt sich so heraus:

Hier ist ein weiterer Stift:

Wie Sie sehen, haben wir die Tabellenzeilen in einen kleinen Block umgewandelt, der alle Informationen enthält. Ich denke, dass diese Tischanpassungsoption für kleine Tische geeignet ist. Genießt es, Freunde!

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 (Padding: 10px; Rand: 1px #000 solid;)

Notiz: CSS-Eigenschaft Der 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

Richten Sie ein absolut positioniertes Element horizontal in der Mitte aus mit CSS. Beispiel: HTML/XHTML. Code: CSS. Code: .example (Position: relativ; links: 0px; oben: 0px; Höhe: 90px; Breite: 100%; Float: links; Polsterung: 10px; Rand: 1px #ccc solide; Hintergrund: #fafafa; -moz-box -sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box;) .example img (position: absolute; links: 0px; rechts: 0px; Rand: 0px auto; Breite: 68px;) Im Beispiel ist das absolut positionierte img-Element zentriert, aber im Allgemeinen diese Methode Die horizontale Mittelausrichtung funktioniert mit anderen absolut positionierten Elementen, sowohl Inline- als auch Blockelementen. Die Breite eines absolut positionierten Elements kann auch in Prozent oder anderen Maßeinheiten angegeben werden. Die CSS-Eigenschaften des Containers (im example.example), in dem sich das mittig ausgerichtete Element befindet, können sehr unterschiedlich sein; die zentrierte Ausrichtung wird mithilfe von Stilen erstellt, die sich direkt auf das Element beziehen: .example img (Position: absolut; links: 0px ; rechts: 0px; Rand: 0px auto;). [ 1 ] Und auch in Netscape 8.01+, Mozilla 1.5+. [ 2 ] Und auch in Netscape 8.01+, Mozilla 1.5+.

Es gibt keine „float:bottom“-Eigenschaft in CSS, aber der Effekt kann auf verschiedene andere Arten erzielt werden. Beispiel: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bis zu einem gewissen Grad ist es uns gelungen, unsere Arbeit zu erledigen, bevor wir sie von einer Kommode aus übernehmen. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fgiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float Bottom HTML / XHTML. Code: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bis zu einem gewissen Grad ist es uns gelungen, unsere Arbeit zu erledigen, bevor wir sie von einer Kommode aus übernehmen. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fgiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link 1

Link 2

Link 3

Datentabellen bewältigen Dinge nicht sehr gut adaptives Design. Leider gibt es diesen Moment. Responsive Design ist alles, was Sie brauchen, um Ihr Design an die Bildschirme anzupassen verschiedene Größen. 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

Wenn sich Tabellen gut an unterschiedliche Bildschirmauflösungen anpassen könnten, würde die Menschheit bis heute Tabellenlayouts erstellen. Ich habe diese Zeit immer noch gefunden und weiß, wovon ich spreche.

Allerdings leben wir in einer anderen Zeit, das Tabellenlayout ist in Vergessenheit geraten, aber der Bedarf, klassische Tabellen auf Websites zu verwenden, bleibt bestehen. Daher werden wir die Existenz von Tabellen nicht leugnen, sondern vielmehr etwas über sie erfahren auf einfache Weise wie man eine Tabelle responsive macht.

Wir haben eine einfache HTML-Tabelle erstellt, solange sie auf den Bildschirm passt, ist alles in Ordnung. Wenn die Bildschirmbreite verringert wird, wird die Tabelle abgeschnitten und wir sehen ihre Daten nicht, oder sie wird sehr klein und wir sehen wieder nichts.

Sie haben vielleicht bemerkt, dass ich die Tabelle in ein div-Tag eingefügt habe, und das offensichtlich aus einem bestimmten Grund. Das div-Tag selbst bewirkt nichts, es sei denn, wir formatieren es.

Durch das Setzen nur einer Eigenschaft passt sich die Tabelle an, eine horizontale Bildlaufleiste erscheint automatisch, wenn der Inhalt innerhalb des div-Tags nicht mehr auf die aktuelle Bildschirmbreite entlang der X-Achse passt.

Div (
Überlauf-x: auto;
)

Lassen Sie uns die restlichen Tabellen-Tags formatieren:

Tisch (
border-collapse: Zusammenbruch; /* Nur einzelne Zeilen anzeigen */
Randabstand: 0; /* Abstand zwischen Zellen */
Breite: 100 %;
Rand: 1px fest #afb42b;
Farbe: #212121;
}

Do, td (
Textausrichtung: links;
Polsterung: 8px;
}

Der Stil des tr (row)-Tags verdient einen gesonderten Kommentar. Es ist bereits üblich, dass Tischreihen ein gestreiftes Erscheinungsbild (Zebra) aufweisen. Verwenden Sie dazu die Pseudoklasse :nth-child mit dem Wert in Klammern even . Der gerade Wert weist allen geraden Elementen Eigenschaften zu, in unserem Fall der Hintergrundfarbe. Dadurch wird der Tisch gestreift.