web-dev-qa-db-fra.com

Largeur de cellule fixe

Beaucoup de gens utilisent encore des tableaux pour les contrôles de présentation, les données, etc. - un exemple en est le populaire jqGrid. Cependant, il y a une magie que je n'arrive 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'un tableau et de le faire obéir comme le fait jqGrid!? Si j'essaie de le reproduire, même si je règle tous les <td style='width: 20px'>, dès que le contenu de l'une de ces cellules est supérieur à 20 pixels, la cellule se développe!

Des idées ou des idées?

htmlcsslayouthtml-table
159
Jimbo

Vous pouvez essayer d'utiliser le style de table de gestion de balises <col> pour toutes les lignes, mais vous devrez définir le style table-layout:fixed sur la classe <table> ou la table css de tables et définir la valeur overflow. style pour les cellules

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

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

et ceci soit votre CSS

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

Maintenant, en HTML5/CSS3, nous avons une meilleure solution au 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.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Vous devez définir la table width de la table même dans solution de haunter . Sinon ça ne marche pas.
Également une nouvelle fonctionnalité CSS3 qui vsync est suggérée: Word-break:break-all;. Cela cassera les mots sans espaces en plusieurs lignes aussi. Il suffit de modifier le code comme ceci:

table.fixed { table-layout:fixed; width:90px; Word-break:break-all;}

Résultat final

Rendered table

90
totymedli
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  Word-wrap:break-Word;
}
12
ajreal

J'ai eu une longue cellule td table, cela a forcé la table sur les bords du navigateur et avait l'air laid. Je voulais juste que cette colonne soit de taille fixe uniquement et qu'elle casse les mots lorsqu'elle atteint la largeur spécifiée. Donc cela a bien fonctionné pour moi:

<td><div style='width: 150px;'>Text to break here</div></td>

Vous n'avez pas besoin de spécifier de style pour la table, les éléments tr. Vous pouvez également utiliser overflow: hidden; comme le suggèrent d’autres réponses, mais cela entraîne la disparition du texte en surplus.

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

10x10

0
user1993774