Largeur de cellule de tableau fixe


175

Beaucoup de gens utilisent encore des tableaux pour mettre en page les contrôles, les données, etc. - un exemple en est le populaire jqGrid. Cependant, il y a de la magie qui se passe que je ne parviens pas à comprendre (ses tables pour pleurer à haute voix, combien de magie pourrait-il y avoir?)

Comment est-il possible de définir la largeur de colonne d'une table et de la faire obéir comme le fait jqGrid !? Si j'essaie de reproduire cela, 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 px, la cellule se développe!

Des idées ou des idées?

Réponses:


249

Vous pouvez essayer d'utiliser la <col>balise gérer le style du tableau pour toutes les lignes, mais vous devrez définir le table-layout:fixedstyle sur la <table>classe css ou les tableaux et définir le overflowstyle des 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; }

15
col ne fonctionnerait pas en html5, définissez la largeur du td individuel à la place par des classes css ou css en ligne
Pankaj Phartiyal

10
La réponse acceptée ne fonctionne que si vous appliquez explicitement une largeur pour le tableau souhaité. Fonctionne parfaitement que vous utilisiez une unité ou un pourcentage. J'ai pensé que je le soulignerais car la réponse de @ totymedli n'a pas obtenu de votes et je ne voulais pas que les utilisateurs l'ignorent. Cependant, la suggestion de saut de mots n'est pas nécessaire, sauf si c'est ce que vous visez.
thebdawk05

Que se passe-t-il lorsque vous avez des lignes avec un seul élément TD qui s'étend sur plusieurs colonnes? En utilisant votre exemple de code, si vous aviez <TD colspan="3">une ligne seule, serait-ce 90px?
sab669

Merci d'avoir aidé. Pour les données qui se chevauchent, ajoutez ceci table.fixed td { word-wrap: break-word; }.
Parag Tyagi

La suggestion de saut de mots n'est pas nécessaire, mais elle est utile pour le reste des utilisateurs de SO et tout à fait pertinente à la question, car le contenu débordant dans les tables de largeur fixe est presque certain de se produire dans la plupart des scénarios.
Amy Pellegrini

101

Maintenant, en HTML5 / CSS3, nous avons une meilleure solution pour le problème. À 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 mettre la table widthmême dans la solution du chasseur . Sinon ça ne marche pas.
Aussi une nouvelle fonctionnalité de CSS3 qui vsync suggéré est: word-break:break-all;. Cela cassera également les mots sans espaces en plusieurs lignes. Modifiez simplement le code comme ceci:

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

Résultat final

Tableau rendu


Si vous lancez une ligne avec un colspan, cela semble casser cette solution. Des suggestions sur la façon d'utiliser cette solution avec un tableau contenant colspan> 1?
Eric K

@QuantumDynamix J'ai résolu ce problème en incluant comme première ligne, une ligne sans colspans, juste toutes les colonnes individuelles avec des largeurs. J'ai ensuite caché cette ligne avec une hauteur de 0, bordure: aucune, visibilité: cachée, remplissage: 0px etc., puis la deuxième ligne est la première que je veux voir où il y a des colspans. La première ligne avec des cellules individuelles de largeur fixe établit les largeurs.
AaronLS

@totymedli Des idées pour que mon tableau prenne la somme de toutes mes largeurs de colonne? Mon tableau est généré un peu dynamiquement et je ne peux donc pas calculer à l'avance la largeur du tableau, mais je ne veux pas utiliser 100% car cela étire certains éléments.
AaronLS

14
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

9
Êtes-vous sûr de pouvoir l'utiliser table-layoutsur un élément td?
Nick

@Nick - ça marche bien. Hovewer je dois également ajouter la propriété min-width et max-width (même valeur que width), puis c'est devenu une largeur vraiment fixe.
Denis Khay

11

J'avais une longue cellule de table td, cela a forcé la table aux bords du navigateur et avait l'air moche. Je voulais juste que cette colonne soit de taille fixe uniquement et brise 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 suggéré par d'autres réponses, mais cela fait disparaître le texte en excès.


2
Ou vous pouvez utiliser max-width au lieu de width si nécessaire. Cela vous permettra de ne pas casser le texte à moins que vous n'atteigniez votre limite de largeur. Et la cellule du tableau n'aura pas d'espace vide si votre texte est plus petit que la largeur spécifiée. <td> <div style = 'max-width: 150px;'> Texte à couper ici </div> </td>
Tarik

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

10 x 10


0

pour le tableau des largeurs FULLSCREEN:

  • la largeur de la table DOIT être de 100%

  • si besoin de N colunms, alors THs DOIT être N + 1

exemple pour 3 colonnes:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }
  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>


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

: premier enfant ...: nième enfant (1) ou ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.