Wie kann ich die Tabellenspaltenbreite begrenzen?

73

Eine der Spalten in meiner Tabelle kann einen langen Text ohne Leerzeichen enthalten. Wie kann ich die Breite auf beispielsweise 150 Pixel begrenzen? Ich möchte nicht, dass es immer 150px ist (wenn es leer ist, sollte es schmal sein), aber wenn es einen langen Text gibt, möchte ich, dass er auf 150px begrenzt ist und der Text umbrochen wird.

Hier ist ein Testbeispiel : http://jsfiddle.net/Kh378/ (beschränken wir die 3. Spalte).

Danke im Voraus.

Update:
Einstellen dieser Stile:

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

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

html css internet-explorer css-tables Nachtcodierer
quelle
Da diese Frage fast drei Jahre alt ist und derzeit kein Kopfgeld hat, habe ich mich gefragt, ob sie noch eine Antwort benötigt.
Frank Conijn
Die Frage wurde in einem anderen StackOverflow-Thread beantwortet . Kurz gesagt, Sie sollten nur width anstelle von max-width verwenden.
Mikhail Larionov
1
@ Frank Conijn, ja, das tut es! :)
Nightcoder
Diese 2 Jahre später Antwort aber
Entwickler
Die Antwort wird sich nicht ändern, also spielt das Alter keine Rolle :)
Reversed Engineer

Antworten:

66

Aktualisiert

Auf den Tabellen tdund thTags habe ich hinzugefügt:

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

Nicht in jedem Browser voll kompatibel, aber ein Anfang.

Brandon
quelle
1
Leider funktioniert es nicht in IE8 (und ich nehme an, es funktioniert in keiner Version von IE ...).
Nightcoder
2
Kann dies als Prozentsatz erfolgen, da es nur als px auf meiner Seite wirksam wird ...
Benutzer
13

Sie müssen stattdessen width 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.

Carlos Toledo
quelle
2
Was ist, wenn Sie keinen <thead>Abschnitt haben?
Timmmm
6

Sie sollten in der Lage sein, Ihre Spalte mit folgenden Stilen zu versehen:

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

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

isNaN1247
quelle
Sehen Sie dies genauer, insbesondere die maximale Breite und (derzeit) die Probleme dort, in der ähnlichen / äquivalenten Lösung dieser Seite stackoverflow.com/a/24620364/2255628
Destiny Architect
4

Nach einigen Experimenten in Chrome kam ich zu Folgendem:

  • Wenn Ihre Tabelle eine hat <th>, sollte entweder eine "Breite" oder eine "maximale Breite" festgelegt sein
  • die <td>'s müssen eine "maximale Breite" und "Zeilenumbruch: Umbruchwort" gesetzt haben;

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

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

user2587656
quelle
0

Es gibt eine Option zur Simulation der maximalen Breite:

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 für $ (window) .on ('resize', ...) mehrmals aufgerufen werden

this.$el

stellt Elternelement dar, in meinem Fall habe ich Marionette

Für jene Elemente, die eine maximale Breite haben sollten, sollte es ein Attribut für eine maximale Breite geben, wie:

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

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

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

word-wrap: break-word;
Amay Kulkarni
quelle
0

es ist sehr leicht

Sie können solche Attribute hinzufügen

maximale Breite

maximale Höhe

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

Kano
quelle