Wie kann Tabellenzeilenüberlauf ausgeblendet werden?

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>

Quelle

2009-10-12 Josh Stodola

Gibt es einen besonderen Grund, warum Sie eine '

' anstatt mit divs/span + CSS verwenden? Die 2. Methode ist eher ein Schmerz, um richtig zu werden, bietet aber mehr Flexibilität. Ich bin mir nicht sicher, ob es möglich ist, mit einer normalen Tabelle zu tun, was Sie wollen. –

+68

Ich verwende eine 'Tabelle', weil ich tabellarische Daten zeige! –

Antwort

Need zwei Attribute angeben, table-layout:fixed auf table und white-space:nowrap; auf den Zellen. Sie müssen auch die overflow:hidden; zu den Zellen zu

table { width:250px;table-layout:fixed; } 
table tr { height:1em; } 
td { overflow:hidden;white-space:nowrap; }

Here'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 :) –

Einziger Nachteil (es scheint), ist, dass die Tabellenzellenbreiten identisch sind. Any Weg, um dies zu umgehen? - Josh Stodola 12. Oktober bei 15:53

definieren Gerade Breite der Tabelle und Breite für jede Tabellenzelle

so etwas wie

table {border-collapse:collapse; table-layout:fixed; width:900px;} 
th {background: yellow; } 
td {overflow:hidden;white-space:nowrap; } 
.cells1{width:300px;} 
.cells2{width:500px;} 
.cells3{width:200px;}

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 eine span mit einem spezifischen class Attribut und wenden Sie eine spezifische width an.

Beispiel:

HTML:

<td><span class="description">My really long description</span></td>

CSS:

span.description { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 150px; 
}

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:

<table> 
<colgroup> 
    <col width="100px" /> 
    <col width="200px" /> 
    <col width="145px" /> 
</colgroup> 
<thead> 
    <tr> 
    <th>My 100px header</th> 
    <th>My 200px header</th> 
    <th>My 145px header</th> 
    </tr> 
</thead> 
<tbody> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
    <td>200px is all you get - anything more hides due to overflow.</td> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
</tbody> 
</table>

Dann, wenn Sie die Stile von den Pfosten oben gelten, wie folgt:

table { 
    table-layout: fixed; /* This enforces the "col" widths. */ 
} 
table th, table td { 
    overflow: hidden; 
    white-space: nowrap; 
}

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

$('selector').tableoverflow();

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.

table { 
    width: 100%; 
} 

.hideend { 
    white-space: normal; 
    overflow: hidden; 
    max-height: 1.2em; 
    min-width: 50px; 
} 
.showall { 
    white-space:nowrap; 
} 

<table> 
    <tr> 
     <td><div class="showall">Show all</div></td> 
     <td> 
      <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div> 
     </td> 
     <td> 
      <div class="showall">Show all this too</div> 
     </td> 
    </tr> 
</table>

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"

div.container { 
    width: 100%; 
    overflow-x: auto; 
}

dann

#table_id tr td { 
    white-space:nowrap; 
}

Ergebnis

Quelle

2018-03-03 08:57:13

Verwandte Themen