wake-up-neo.net

Wie kann ich eine CSS-Tabelle an die Bildschirmbreite anpassen?

Derzeit ist die Tabelle zu breit und der Browser fügt eine horizontale Bildlaufleiste hinzu.

20
David B

Wenn die Tabelle content zu breit ist (wie in dieses Beispiel ), können Sie nichts anderes tun, als den Inhalt zu ändern, damit der Browser ihn in einem engeren Format anzeigen kann. Im Gegensatz zu den vorherigen Antworten hat das Festlegen der Breite auf 100% keinerlei Auswirkung, wenn der Inhalt zu breit ist (wie dieser Link und dieser , demonstrieren). Browser versuchen bereits, Tabellen innerhalb des linken und rechten Rands zu halten, wenn dies möglich ist, und greifen auf eine horizontale Bildlaufleiste zu, wenn dies nicht möglich ist.

Einige Möglichkeiten, wie Sie den Inhalt ändern können, um eine Tabelle enger zu gestalten:

  • Reduzieren Sie die Anzahl der Spalten (brechen Sie möglicherweise eine Megalithentabelle in mehrere unabhängige Tabellen auf).
  • Wenn Sie CSS white-space: nowrap für einen beliebigen Inhalt (oder das alte nowrap-Attribut,  , ein nobr-Element usw.) verwenden, prüfen Sie, ob Sie ohne sie auskommen können, sodass der Browser die Möglichkeit hat, diesen Inhalt einzuwickeln, um die Breite zu erhalten Nieder.
  • Wenn Sie sehr breite Ränder, Polsterungen, Umrandungen usw. verwenden, reduzieren Sie deren Größe (aber ich bin sicher, dass Sie daran gedacht haben).

Wenn die Tabelle zu breit ist, Sie aber keinen guten Grund dafür finden (der Inhalt ist nicht so breit usw.), müssen Sie weitere Informationen dazu bereitstellen, wie Sie die Tabelle und die umgebenden Elemente gestalten usw. Der Browser wird standardmäßig wieder von der Bildlaufleiste ausgeschlossen, wenn dies möglich ist.

17
T.J. Crowder

CSS:

table { 
    table-layout:fixed;
}

Update mit CSS aus den Kommentaren: 

td { 
    overflow: hidden; 
    text-overflow: Ellipsis; 
    Word-wrap: break-Word;
}

Bei Mobiltelefonen lasse ich die Tabellenbreite, weise aber der Tabelle eine zusätzliche CSS-Klasse zu, um den horizontalen Bildlauf zu ermöglichen (die Tabelle wird nicht mehr über den Bildschirm des Mobilgeräts verschoben): 

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

Ausreichend.

31
Kai Noack
table { width: 100%; }

Erzeugt aufgrund der im Körper verwendeten Ränder und Polsterungen nicht das genaue Ergebnis, das Sie erwarten. Wenn also Skripte OKAY sind, dann Jquery verwenden.

$("#tableid").width($(window).width());

Wenn nicht, verwenden Sie dieses Snippet

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

Sie werden feststellen, dass die Breite die Seite perfekt abdeckt.

Die Hauptsache ist, die margin und padding, wie ich sie am Körper gezeigt habe, zu aufheben, dann sind Sie gesetzt.

7
Starx

Wie wäre es mit:

table { 
   width: 100%; 
}

Möglicherweise haben Sie einige Bilder, die zu groß sind und den Tisch breiter machen.

Überprüfen Sie auch, wie Ihre Tabelle in anderen Browsern aussieht. 

0
True Soft

Legen Sie die Tabelle in ein Containerelement mit 

Überlauf: scrollen; Max-Breite: 95VW;

oder passen Sie die Tabelle an den Bildschirm an und Überlauf: Blättern Sie durch alle Tabellenzellen.

0

Es gibt bereits eine gute Lösung für diese Frage. Aber alle vergessen die Schriftgröße. Dies ist nicht zuletzt die Lösung. Sie können die Schriftgröße um 2 oder 3 px verringern. es wird immer noch gut für den Benutzer sichtbar und für etwas können Sie Ihre Tischbreite verringern. das hat für mich funktioniert. da meine tabelle 5 spalten hat, zeigt 4 perfekt den fünften ausblickbereich. Also habe ich die Schriftgröße verringert und alle 5 Spalten werden in den Bildschirm eingepasst

table th td
{
 font-size:14px;
}

Zu Ihrer Information, wenn Ihre Tabellen zu viele Spalten haben, Sie aber nicht verkleinern können, dann ist die Schriftgröße kleiner als der horizontale Bildlauf. es gibt zwei vorteile. Ihr Stil für das mobile Web bleibt derselbe (gut ohne horizontalen Bildlauf) und wenn der Benutzer die geringe Größe sieht, zoomen die meisten Benutzer die Tabelle auf das Komfortniveau ein.

0
gourav bajaj

Legen Sie font-size in Einheiten für die Darstellungsfeldbreite fest, z.

table { font-size: 0.9vw; }

Dies macht die Schrift unlesbar, wenn die Seite zu schmal ist, aber manchmal ist das akzeptabel.

0
Sergey M