web-dev-qa-db-fra.com

Comment puis-je limiter la largeur de la colonne de la table?

L'une des colonnes de ma table peut contenir un texte long sans espaces. Comment puis-je limiter sa largeur à, par exemple, 150 pixels? Je ne veux pas qu'il soit toujours à 150 pixels (s'il est vide, cela devrait être étroit), mais s'il y a un long texte, je souhaite qu'il soit limité à 150 pixels et que le texte soit mis en forme.

Voici un exemple de test: http://jsfiddle.net/Kh378/ (limitons la 3ème colonne).

Merci d'avance.

Mettre à jour:
Réglage de ces styles:

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

ne fonctionne pas dans IE8 (testé sur différents ordinateurs) et je suppose que cela ne fonctionne dans aucune version de IE.

htmlcssinternet-explorercss-tables
54
nightcoder

Mis à jour

Sur les balises td et th de la table, j'ai ajouté:

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

Pas totalement compatible dans tous les navigateurs mais un début.

58
Brandon

Vous devez utiliser la largeur à la place.

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

Mais juste dans la section <thead>.

5
Carlos Toledo

Vous devriez pouvoir styliser votre colonne avec:

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

Notez que Word-wrap est pris en charge par les navigateurs IE 5.5+, Firefox 3.5+ et WebKit (Chrome et Safari).

3
isNaN1247

Après quelques expériences avec Chrome, je suis arrivé à ceci:

  • si votre table a un <th> qui devrait avoir un "largeur" ​​ou un "max-largeur" ​​défini 
  • le <td> doit avoir défini une "largeur maximale" et un "Word-wrap: break-Word;"

Si vous utilisez une "largeur" ​​dans le <th>, sa valeur sera utilisée. Si vous utilisez un "max-width" dans <th>, la valeur "max-width" du <td> est utilisée à la place.

Donc, cette fonctionnalité est assez complexe. Et je n'ai même pas étudié les tables sans en-têtes ou sans longues chaînes nécessitant un "mot clé".

2
user2587656

c'est très facile

Vous pouvez ajouter des attributs comme ceux-ci

largeur maximale 

hauteur maximum 

Ils peuvent être définis en HTML en tant qu'attribut ou en CSS en tant que style

1
Kano

il y a une option pour simuler max-width:

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');
        }
    });
}

cette fonction peut être appelée plusieurs fois sur $ (fenêtre) .on ('redimensionner', ...)

this.$el

représente l'élément parent, dans mon cas, j'ai la marionnette

pour les éléments th qui devraient avoir max-width, il devrait y avoir un attribut max-width comme:

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

1) Spécifiez la largeur de chaque colonne dans <th> en fonction de vos besoins.

2) Ajoutez le retour à la ligne pour chaque <td> dans <tr> du <table>.

Word-wrap: break-Word;
0
Amay Kulkarni