Définir la largeur de colonne du tableau constante quelle que soit la quantité de texte dans ses cellules?

Dans mon tableau, j'ai défini la largeur de la première cellule d'une colonne 100px.
Toutefois, lorsque le texte dans l'une des cellules de cette colonne est trop long, la largeur de la colonne devient supérieure à 100px. Comment pourrais-je désactiver cette extension?

J'ai joué avec un peu parce que j'avais du mal à le comprendre.

Vous devez définir la largeur de la cellule (que ce soit thou tdtravaillé, j'ai défini les deux) ET définissez le table-layoutsur fixed. Pour une raison quelconque, la largeur de la cellule ne semble rester fixe que si la largeur de la table est également définie (je pense que c'est idiot mais quoi).

En outre, il est utile de définir la overflowpropriété pour hiddenempêcher tout texte supplémentaire de sortir du tableau.

Vous devez également vous assurer de laisser toutes les bordures et tailles pour CSS.

Ok alors voici ce que j'ai:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Le voici dans JSFiddle

Ce type avait un problème similaire: largeurs des cellules du tableau - largeur de fixation, habillage / tronquage des mots longs

Voir: http://www.html5-tutorials.org/tables/changing-column-width/

Après la balise table, utilisez l'élément col. vous n'avez pas besoin d'une balise de fermeture.

Par exemple, si vous aviez trois colonnes:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Ajoutez simplement une <div>étiquette à l'intérieur <td>ou <th>définissez la largeur à l'intérieur <div>. Cela vous aidera. Rien d'autre ne fonctionne.

par exemple.

<td><div style="width: 50px" >...............</div></td>

Si vous avez besoin d'une ou plusieurs colonnes de largeur fixe alors que d'autres colonnes doivent être redimensionnées, essayez de définir les deux min-widthet max-widthla même valeur.

Vous devez écrire ceci dans le CSS correspondant

table-layout:fixed;

Ce que je fais c'est:

1. Réglez la largeur td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Définissez la largeur td avec CSS:

   <td style="width:200px; height:50px;">

3. Réglez à nouveau la largeur comme max et min avec CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Cela semble un peu répétitif mais cela me donne le résultat souhaité. Pour y parvenir avec beaucoup de facilité, vous devrez peut-être mettre les valeurs CSS dans une classe dans votre feuille de style:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

puis:

<td class="td_size">

Placez l'attribut de classe à celui que <td>vous souhaitez.

J'ai utilisé ça

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Si vous ne souhaitez pas une mise en page fixe, spécifiez une classe pour que la colonne soit correctement dimensionnée.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Il permet également, de mettre dans la dernière "cellule de remplissage", avec largeur: auto . Cela occupera l'espace restant et laissera toutes les autres dimensions comme spécifié.

Faites en sorte que la réponse acceptée réponde pour les petits écrans lorsqu'ils sont inférieurs à la largeur fixe.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Réglage de ceci:

style="min-width:100px;" 

A travaillé pour moi.

KAsun a la bonne idée. Voici le bon code ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Selon ma réponse ici , il est également possible d'utiliser une tête de tableau (qui peut être vide) et d'appliquer des largeurs relatives pour chaque cellule de tête de tableau. Les largeurs de toutes les cellules du corps du tableau seront conformes à la largeur de leur en-tête de colonne. Exemple:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Voir résultat

Sinon, utilisez colgroupcomme suggéré dans la réponse de Hyathin.

J'utilise un élément :: after dans la cellule où je veux définir une largeur minimale quel que soit le texte présent, comme ceci:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Je n'ai pas besoin de définir la largeur sur le parent de la table ni d'utiliser la disposition de table.

J'ai trouvé que la réponse de KAsun fonctionne mieux en utilisant vw au lieu de px comme ceci:

<td><div style="width: 10vw" >...............</div></td>

C'était le seul style dont j'avais besoin pour ajuster la largeur de la colonne

Vous n'avez pas besoin de définir "fixed"- tout ce dont vous avez besoin est de définir overflow:hiddenpuisque la largeur de colonne est définie.