516 votes

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

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

583voto

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

168voto

Hyathin Points 121
<p>Voir : <a href="http://www.html5-tutorials.org/tables/changing-column-width/">http://www.html5-tutorials.org/tables/changing-column-width/</a><p>Après la balise de tableau, utilisez l’élément col. vous n’avez pas besoin de balise de fermeture.</p><p>Par exemple, si vous aviez trois colonnes :</p><pre><code></code></pre></p>

124voto

KAsun Points 471
<p>Il suffit d’ajouter <code></code> tag à l’intérieur de <code></code> ou <code></code> définissent la largeur à l’intérieur de <code></code> . Cela vous aidera. Rien ne fonctionne autrement.<p>par exemple.</p><pre><code></code></pre></p>

63voto

scrrr Points 895
<p>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 <code></code> et <code></code> à la même valeur.</p>

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