509 votes

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

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 ?

578voto

ptpaterson Points 2393

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

162voto

Hyathin Points 121

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 :

122voto

KAsun Points 471

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.

63voto

scrrr Points 895

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.

21voto

ErickBest Points 109

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X