Ich habe eine Tabelle, die über den Rand des Bildschirms hinausragt, aber der Körper wird nur so breit wie der Bildschirm, wodurch die Tabelle überläuft.
Demo: Ссылка
%Vor%Das ist eines dieser Dinge, die mich denken lassen, dass CSS kaputt ist. Ich dachte, dass sich Elemente, die enthalten sind, ausdehnen sollten, um zu ihren Inhalten zu passen.
Frage 1: Warum macht es das?
Frage 2: Was soll ich tun, um einen Abstand zwischen der Tabelle und dem rechten Rand der Seite zu erhalten?
CSS ist nicht kaputt, das Verhalten, das Sie sehen, ist von Entwurf .
Einige Zitate aus dem obigen Link:
Die folgenden Bedingungen müssen zwischen den verwendeten Werten der anderen Eigenschaften gelten:
'Rand-Links' + 'Rand-Links-Breite' + 'Rand-Links' + 'Breite' + 'Rand-rechts' + 'Rand-Rechts-Breite' + 'Rand-Rechts' = Breite des Umfassens Blockieren
..
Wenn 'width' auf 'auto' gesetzt ist, werden alle anderen 'auto' Werte zu '0' und 'width' folgt aus der resultierenden Gleichheit.
Daraus ergibt sich, dass Elemente auf Blockebene die Standardbreite von 100% ihres umgebenden Blocks haben, wenn alle anderen Eigenschaften nicht gesetzt sind.
<body> ist standardmäßig ein Element auf Blockebene.
Sie könnten float: left; oder display: inline-block auf body setzen und es wird mit seinem Inhalt wachsen.
Hier ist ein
Um Frage 2 zu beantworten (um das Ergebnis der akzeptierten Antwort zu erhalten, ohne display: table auf ein Element zu setzen, das kein table ist), können Sie das folgendermaßen tun:
CSS:
%Vor% Hier ist ein
Die einzige Lösung hierfür ist eine vertikale Bildlaufleiste.
Es kann mit einem zusätzlichen div erreicht werden, das table umschließt.
Dies wäre das CSS:
%Vor% Wenn Sie nur p -Tag haben, hilft das Attribut word-wrap:break-word; .
Sie können den Absatz auch außerhalb von div verschieben, wodurch Sie den gesamten Inhalt ohne Scrollen sehen können.
Siehe die Geige für eine funktionierende Lösung:
Wenn Sie die gesamte Seite scrollen möchten, und nicht nur das div, kann dies verwendet werden:
%Vor%Siehe Ссылка
Wenn Sie die Bildlaufleiste überhaupt nicht möchten, müssen Sie anstelle einer Tabelle Listen oder divs verwenden.
Wie Sie die tr- und td-Tags verwendet haben, sind die Daten in der Tabelle zwangsläufig überlaufen.
Sie müssen entscheiden, wie viele Zeilen und Spalten Ihre Tabelle haben soll, wenn Sie eine einfache HTML-Tabelle verwenden. Setzen Sie einfach tr und td Tags entsprechend, und dann sind Sie fertig. Ссылка Fiddle
Tags und Links css