50
Ich habe einige HTML-Tabellen, wo die Textdaten zu groß sind, um zu passen. Also, es erweitert die Zelle vertikal, um dies zu berücksichtigen. Jetzt sind Zeilen, die den Überlauf haben, doppelt so groß wie Zeilen mit kleineren Datenmengen. Das ist inakzeptabel. Wie kann ich erzwingen, dass Tabelle dieselbe Zeilenhöhe von 1em
hat?Wie kann Tabellenzeilenüberlauf ausgeblendet werden?
Hier ist ein Markup, das das Problem reproduziert. Die Tabelle sollte nur die Höhe einer Zeile haben, wobei der überlaufende Text verborgen ist.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
Gibt es einen besonderen Grund, warum Sie eine '
Ich verwende eine 'Tabelle', weil ich tabellarische Daten zeige! –
Antwort
Need zwei Attribute angeben,
table-layout:fixed
auftable
undwhite-space:nowrap;
auf den Zellen. Sie müssen auch dieoverflow:hidden;
zu den Zellen zuHere's a Demo zu bewegen. Getestet in Firefox 3.5.3 und IE 7
Quelle
2009-10-12 14:58:49
Einziger Nachteil (es scheint), ist, dass die Tabellenzellenbreiten identisch sind. Irgendeine Möglichkeit, das zu umgehen? –
Nicht so weit ich weiß - ich glaube, dass im Browserteil eine Annahme gemacht wird, dass, da keine individuellen Zellenbreiten definiert sind, die Tabellenbreite gleichmäßig auf die Anzahl der Zellen aufgeteilt wird. Der einzig mögliche Weg, dies zu umgehen, wäre, eine Breite für jede Zelle zu berechnen, basierend auf der Anzahl der Zeichen, die jede enthält (von der Gesamtzahl der Zeichen für alle Zellen), entweder Server- oder Client-Seite (ersteres wahrscheinlich die performantere Wahl). Klingt das übertrieben? –
von insgesamt Zeichen in allen Zellen in der Zeile in Frage ist, was ich in meinem letzten Kommentar gemeint habe :) –
definieren Gerade Breite der Tabelle und Breite für jede Tabellenzelle
so etwas wie
Es wirkt wie ein Zauber: o)
Quelle
2009-11-05 15:12:03 Popara
Aber die Breite wird basierend darauf schwanken, wie viele Daten darin angezeigt werden sollen. Es ist nicht so, dass ich hier monospaced Fonts verwende !! –
Im Allgemeinen, wenn Sie
white-space: nowrap;
verwenden, ist es wahrscheinlich, weil Sie wissen, welche Spalten Inhalte enthalten werden, die die Zelle umschließt (oder streckt die Zelle). Für diese Spalten wickle ich im Allgemeinen den Inhalt der Zelle in einespan
mit einem spezifischenclass
Attribut und wenden Sie eine spezifischewidth
an.Beispiel:
HTML:
CSS:
Quelle
2011-03-04 16:15:16 user645077
Funktioniert wirklich gut .. – Ben
Vielen Dank das war sehr hilfreich. –
Besserer Ansatz als das Festlegen der gesamten Tabelle. –
In den meisten modernen Browsern können Sie jetzt angeben:
Dann, wenn Sie die Stile von den Pfosten oben gelten, wie folgt:
Das Ergebnis gibt Ihnen gut versteckt Überlauf in der gesamten Tabelle. Funktioniert in den neuesten Chrome, Safari, Firefox und IE. Ich habe nicht in IE vor 9 getestet - aber meine Vermutung ist, dass es bis 7 zurück arbeiten wird, und Sie vielleicht sogar Glück haben, 5.5 oder 6 Unterstützung zu sehen. ;)
Quelle
2012-06-13 21:15:21
Wenn Javascript als Antwort akzeptiert wird, habe ich ein jQuery-Plugin erstellt, um dieses Problem zu beheben (weitere Informationen zum Problem finden Sie unter CSS: Truncate table cells, but fit as much as possible).
das Plugin nutzen zu können, nur
Plugin-Typ:https://github.com/marcogrcr/jquery-tableoverflow
Voll Beispiel:http://jsfiddle.net/Cw7TD/3/embedded/result/
Quelle
2013-05-13 14:14:36 Marco
Heres etwas, was ich versuchte. Im Grunde lege ich den "flexiblen" Inhalt (der td, der zu lange Zeilen enthält) in einen div-Container, der eine Zeile hoch ist, mit verstecktem Überlauf. Dann lasse ich den Text ins Unsichtbare schlüpfen. Sie bekommen Pausen bei Wordbreaks, nicht nur einen glatten Cut-Off.
Quelle
2014-02-27 08:52:53
Ich sollte hinzufügen, dass der Vorteil hier ist, dass ich keine absoluten Spaltenbreiten festlegen muss. Das Design ist fließend. –
Das Problem hier ist, woher wissen Sie, welche Zelle, welcher Klasse zuweisen? Wenn Sie nicht jede Seite manuell eingeben, die Sie jemals benötigen, Web 1.0-Stil, ist dies keine Lösung für alle Fälle. –
wickeln Sie die Tabelle in einem div mit class = "container"
dann
Ergebnis
Quelle
2018-03-03 08:57:13
Verwandte Themen