Es gibt ein paar gute Möglichkeiten, Webseiten wie diese, die auf Bildschirmgröße zu machen. Ich werde zwei von ihnen beschreiben, aber auch hier gibt es viel mehr:
- machen die Tischbreite
- Eine externe Stilbibliothek, wie Bootstrap
machen die Tabelle die Seitenbreite entsprechen Breite Übereinstimmung mit der Seitenbreite
Zuerst müssen Sie sicherstellen, dass die Seite selbst die Stilposition hat: relativ dazu - damit alle untergeordneten Elemente (einschließlich Ihrer Tabelle) relativ zu ihr positioniert oder bemessen werden können. Es gibt ein paar Möglichkeiten, dies mit CSS zu tun, aber wenn Sie Klassen verwenden, können Sie einfach alle Standard-High-Level-Elemente in HTML zuweisen, um relativ positioniert zu werden, und die volle Breite, die vom Browser zur Verfügung gestellt wird.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Jetzt, wo das aus dem Weg ist, haben Sie einen Ausgangspunkt für Ihre dynamische Breite. Wenn die Tabelle ein direktes Kind des Elements <body> ist, sollten Sie eine Klasse dafür definieren, die ebenfalls eine Breite von 100% ergibt. Denken Sie daran, dass diese Breite der Breite des übergeordneten Elements entspricht. Da also die <body> die gesamte Seitenbreite ist, wird die Tabelle auch versuchen, zu sein! Wenn Sie etwas Raum um sie hinzufügen möchten (so dass es buchstäblich nicht die Seitenkanten treffen, können Sie einige padding auch addieren!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Jetzt können Sie diese Klasse auf dem Tisch Element setzen, und es sollte Karte der Seitengröße! beachten sie, dass, wenn Ihre Bilder die Größe neu nicht nach der Größe ihrer <td> Eltern, dann könnten sie ein anderes unerwünschtes Verhalten überlappen oder haben.
mit Bootstrap
Also wenn Sie daran interessiert sind, bestehende Frameworks für die Organisation Ihrer HTML e Auf der Webseite möchte ich Bootstrap empfehlen. Bootstrap bietet Ihnen eine Reihe vordefinierter Klassen mit einer konsistenten und vorhersehbaren Struktur, die Sie für dynamische Websites verwenden können. Im Allgemeinen umfasst Bootstrap-Struktur drei Hauptklassen:
Es ist eigentlich ganz ähnlich mit einer HTML-Tabelle zu arbeiten - aber es braucht dynamische Dimensionierung berücksichtigt, indem Design.
können Sie eine vollständige Dokumentation und Beispiele finden Bootstrap für die Verwendung hier: Bootstrap Docs
dies kann Ihnen helfen: https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of -different-height-und-width-the-same-via-css –
Sie können die Bildgröße in Prozent, nicht Pixel. – tipsfedora