it-swarm.com.de

Wie beschränke ich eine Tabellenzelle mit CSS auf eine Textzeile?

Ich habe eine Benutzertabelle, in der jede Zeile ihren Namen, ihre E-Mail-Adresse usw. enthält. Für einige Benutzer ist diese Zeile eine Textzeile hoch, für andere zwei usw. Ich möchte jedoch, dass jede Zeile der Tabelle eine Textzeile hoch ist und den Rest abschneidet.

Ich habe diese beiden Fragen gesehen:

Tatsächlich ist meine Frage genau der ersten ähnlich, aber da der Link tot ist, kann ich sie nicht studieren. Beide Antworten sagen zu white-space: nowrap. Dies funktioniert jedoch nicht, vielleicht fehlt mir etwas.

Da ich Ihnen den Code nicht zeigen kann, habe ich das Problem reproduziert:

<style type="text/css">
td {
    white-space: nowrap;
    overflow: hidden;
    width: 125px;
    height: 25px;
}
</style>

<div style="width:500px">
<table>
    <tr>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
    </tr>
</table>
</div>

Ohne white-space Die Tabelle ist 500 Pixel breit und der Text besteht aus mehr als einer Zeile.

Aber white-space: nowrap veranlasst den Browser, die Anweisung width einfach zu ignorieren und die Breite der Tabelle zu erhöhen, bis alle Daten in eine Zeile passen.

Was mache ich falsch?

36
Tomaka17

überlauf funktioniert nur, wenn bekannt ist, wo mit dem Überlauf begonnen werden soll. Sie müssen die Attribute width und height für <td> Festlegen.

NEHMEN 2

Versuchen Sie, dem Stil der Tabelle table-layout: fixed; width:500px; Hinzuzufügen.

UPDATE 3

bestätigte dies funktioniert: http://jsfiddle.net/e3Eqn/

22
Mike Sherov

Fügen Sie Ihrem Stylesheet Folgendes hinzu:

table { white-space: nowrap; }

33
Googuez

Fügen Sie Ihrem Stylesheet Folgendes hinzu:

table{
     width: 500px; table-layout:fixed;
}

Sie müssen die Tabellenbreite hinzufügen, um sicherzustellen, dass die nächste Eigenschaft die Elemente auf die angegebene Größe anpasst. Die Tabellenlayout-Eigenschaft hier zwingt den Browser, ein festes Layout innerhalb der angegebenen 500 Pixel zu verwenden.

6
cm2
  <table border="1" style="width:200px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td nowrap="nowrap">
    
                Single line cell just do it</td>
   <td>
        
                multiple lines here just do it</div></td>
</tr>
</table>

Einfach und nützlich. Verwenden Sie den obigen Code für

2
user2782717