Largeur de cellule de tableau fixe

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?

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

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

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

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.

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

10 x 10

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>

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

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