Largeur de cellule de table fixe

Beaucoup de gens utilisent encore des tableaux pour mettre en forme les contrôles, les données, etc. Par exemple, le populaire jqGrid. Cependant, il y a un événement magique que je ne peux pas comprendre (ses tables pour crier fort, combien de magie pourrait-il y avoir?)

Comment est-il possible de définir la largeur de colonne d’une table et de l’obtenir comme le fait jqGrid? Si j’essaie de reproduire cela, même si je mets chaque

, dès que le contenu de l’une de ces cellules est supérieur à 20px, la cellule se développe!

Des idées ou des idées?

Vous pouvez essayer d’utiliser le style de table de gestion des balises

pour toutes les lignes, mais vous devrez définir la table-layout:fixed la table-layout:fixed style table-layout:fixed sur la classe

ou css des tables et définir le style de overflow pour les cellules

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

 
text text text

et ce soit votre CSS

 table.fixed { table-layout:fixed; } table.fixed td { overflow: hidden; } 

Maintenant, en HTML5 / CSS3, nous avons une meilleure solution pour le problème. A mon avis, cette solution purement CSS est recommandée:

 table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/ table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/ table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/ table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/ table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/ 
 
Veryverylongtext Actuallythistextismuchlongeeeeeer We should use spaces tooooooooooooo
 table td { table-layout:fixed; width:20px; overflow:hidden; word-wrap:break-word; } 

J’ai eu une longue cellule de table td, cela a forcé la table sur les bords du navigateur et avait l’air moche. Je voulais juste que cette colonne soit de taille fixe seulement et que les mots soient brisés quand elle atteint la largeur spécifiée. Donc cela a bien fonctionné pour moi:

 
Text to break here

Vous n’avez pas besoin de spécifier un style quelconque pour la table, les éléments tr. Vous pouvez également utiliser le débordement: caché; comme suggéré par d’autres réponses, mais cela fait disparaître le texte en excès.

 table { table-layout:fixed; width:200px; } table tr { height: 20px; } 

10×10

 table { table-layout:fixed; } td,th { width:20px; word-wrap:break-word; } 

: premier-enfant …: n-enfant (1) ou …