CSS: Comment définir la largeur de la colonne de la table indépendamment de la quantité de texte dans ses cellules?

Question

Dans ma table, j’ai mis la largeur de la première cellule d’une colonne pour être . Toutefois, lorsque le texte dans l’un de la cellule de cette colonne est trop long, la largeur de la colonne devient plus . Comment est-ce que je pouvais désactiver cette expansion ?

Answer 1

J'ai joué avec pendant un peu parce que j'ai eu du mal à essayer de le comprendre.

Vous devez définir la largeur de la cellule (soit th ou td travaillé, j'ai mis les deux) ET de mettre la table-layout fixe. Pour une raison quelconque, la largeur de la cellule semble être la seule à rester fixe si la largeur de la table est, trop (je pense que c'est idiot, mais whatev). Il est également utile d'paramètre de la propriété overflow hidden.

Assurez-vous de laisser toutes les riverains et de dimensionnement pour le CSS, trop.

Ok, donc voici ce que j'ai.

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;
    width: 200px;
}

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

Ici, il est en JSFiddle

Ce gars avait un problème similaire: cellule de Tableau des largeurs de fixation de la largeur, de l'emballage et de tronquer les mots longs

Answer 2

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

Après la balise de tableau, utilisez l’élément col. vous n’avez pas besoin de balise de fermeture.

Par exemple, si vous aviez trois colonnes :

Answer 3

Il suffit d’ajouter tag à l’intérieur de ou définissent la largeur à l’intérieur de . Cela vous aidera. Rien ne fonctionne autrement.

par exemple.

Answer 4

Si vous avez besoin d’une ou plusieurs colonnes à largeur fixe tandis que les autres colonnes doit être redimensionnée, essayez de régler les deux et à la même valeur.

Answer 5

Ce que je fais, c'est:

1. Définir la td width:

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

2. Définir la td width CSS:

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

3. Définir la largeur de nouveau comme max et min avec les CSS:

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

Il semble peu répétitif, mais ça me donne le résultat souhaité. Pour parvenir à cela avec beaucoup de facilité, vous pouvez avoir besoin de mettre le CSS valeurs 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*/   
}

alors:

<td class="td_size">

Lieu de l'attribut de classe à tout <td> vous le souhaitez.