wake-up-neo.com

Wie kann ich die Spaltenbreite der Tabelle begrenzen?

Eine der Spalten in meiner Tabelle kann einen langen Text ohne Leerzeichen enthalten. Wie kann ich seine Breite auf etwa 150px beschränken? Ich möchte nicht, dass es immer 150px ist (wenn es leer ist, sollte es eng sein), aber wenn es einen langen Text gibt, möchte ich, dass es auf 150px begrenzt ist und der Text eingeschlossen wird.

Hier ein Testbeispiel: http://jsfiddle.net/Kh378/ (lasst uns die 3. Spalte einschränken).

Danke im Voraus.

Update:
Einstellen dieser Stile:

Word-wrap: break-Word;
max-width: 150px;

funktioniert nicht in IE8 (getestet auf verschiedenen Computern) und ich nehme an, dass es in keiner Version von IE funktioniert.

htmlcssinternet-explorercss-tables
54
nightcoder

Aktualisierte

Bei den td- und th-Tags der Tabelle habe ich Folgendes hinzugefügt:

Word-wrap: break-Word;
max-width: 150px;

Nicht in jedem Browser voll kompatibel, aber ein Anfang.

58
Brandon

Sie müssen stattdessen die Breite verwenden.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                
            <th style="width: 150px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Aber nur in der <thead> Sektion.

5
Carlos Toledo

Sie sollten in der Lage sein, Ihre Kolumne mit:

max-width: 150px; 
Word-wrap: break-Word;

Beachten Sie, dass Word-wrap in den Browsern IE 5.5+, Firefox 3.5+ und WebKit (Chrome und Safari) unterstützt wird.

3
isNaN1247

Nach einigen Experimenten in Chrome kam ich zu folgendem:

  • wenn Ihre Tabelle einen <th> hat, sollte entweder "width" oder "max-width" gesetzt sein 
  • die <td>s müssen eine "max-width" und "Word-wrap: break-Word" festgelegt haben.

Wenn Sie eine "Breite" im <th> verwenden, wird dessen Wert verwendet. Wenn Sie im <th> eine "max-width" verwenden, wird stattdessen der Wert "max-width" der <td> verwendet.

Diese Funktionalität ist also recht komplex. Und ich habe nicht einmal Tabellen ohne Kopfzeilen oder ohne lange Zeichenfolgen studiert, die ein "Break-Word" benötigen.

2
user2587656

es ist sehr leicht

Sie können Attribute wie diese hinzufügen

maximale Breite 

maximale Höhe 

Sie können in HTML als Attribut oder in CSS als Stil festgelegt werden

1
Kano

es gibt eine Option, um die maximale Breite zu simulieren:

simulateMaxWidth: function() {
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell
    this.$el.find('th').each(function(ind, th) {
        var el = $(th);
        var maxWidth = el.attr('max-width');
        if (maxWidth && el.width() > maxWidth) {
            el.css('width', maxWidth + 'px');
        }
    });
}

diese Funktion kann mehrfach unter $ (window) .on ('resize', ...) aufgerufen werden

this.$el

stellt übergeordnetes Element dar, in meinem Fall habe ich Marionette

für die th-Elemente, die max-width haben sollten, sollte ein max-width-Attribut vorhanden sein:

<th max-width="120">
0
user2846569

1) Geben Sie die Breite für jede Spalte in <th> an.

2) Fügen Sie für jeden <td> in <tr> des <table> einen Zeilenumbruch ein.

Word-wrap: break-Word;
0
Amay Kulkarni