Définir la largeur de colonne constant, indépendamment de la quantité de texte dans ses cellules?

Dans ma table 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 de plus en plus de 100px. Comment pourrais-je désactiver cette extension?

stackoverflow.com/questions/1258416/word-wrap-in-a-html-table pourrait aider à vous diriger dans la bonne direction
Dans mon cas, pas d'expansion qui s'est passé, mais le contraire: non désirés de rétrécissement de la largeur en dépit de mon explicite de la largeur de la déclaration. Ridicule!
La seule bonne solution pour cela est d'utiliser colgroup avec des cols en elle, et de définir les cols de la largeur.
table-layout:fixed; est la solution

InformationsquelleAutor Misha Moroshko | 2010-12-16

563

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 définir la table-layout à fixed. 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).

Aussi, il est utile de définir le overflow propriété hidden pour éviter tout texte supplémentaire de sortir de la table.

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

Ok, donc voici ce que j'ai:

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

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
```
HTML:
```
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>
```
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
- Il est important de remarquer ceci: "Le navigateur va alors définir les largeurs de colonne en fonction de la largeur des cellules de la première ligne de la table", à partir de stackoverflow.com/questions/570154/...
- Il fonctionne lorsque la largeur de la table n'est pas fixe. jsfiddle.net/lavinski/CGCFW/3 Vous avez juste besoin d'une ligne dynamique pour prendre le reste de l'espace.
- alternativement, vous pouvez définir la largeur de la table de 1px; avec overflow: visible pour les tables de la dynamique de la taille, tant que la taille des cellules est fixe et le trop-plein est visible, il n'a pas d'importance si la taille de la table elle-même est plus grand ou plus petit que les cellules.
- Que pourriez-vous faire si votre banque td a "width=30%;"?
- watta.... overflow: hidden; sur un td??? 😉
- S'il vous plaît ajouter le overflow: hidden @RokoC.Buljan
- Si la table a une width, même en utilisant table-layout: fixed la largeur des colonnes ne sera pas résolu parce que certaines colonnes obtiendrez agrandie pour remplir la largeur de la table, si la somme de toutes les colonnes, la largeur est inférieure à la largeur de la table. Pour éviter que vous avez besoin de ce que @MitjaGustin répondre ci-dessous suggère. Toutefois, si vous spécifiez la largeur de toutes les colonnes, alors il est inutile de préciser la largeur de la table.
- ce qui se passe ici si la première cellule de la ligne s'étend sur toutes les colonnes?
InformationsquelleAutor ptpaterson
151

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

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

Par exemple, si vous avez trois colonnes:
```
<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
```
- Ce! C'est le HTML5 réponse et il freaking fonctionne sans avoir à sauter à travers stupide cerceaux. De Plus, vous pouvez utiliser <col class="someClassName"> au lieu de garder vos largeurs de CSS et de ne pas polluer le HTML, le style de l'info.
- Ne fonctionne pas pour moi.
- vous avez peut-être eu un autre problème substitution de cette CSS, de style en ligne, ou d'un mauvais doctype etc.. Cela fonctionne bien, c'est la manière standard pour définir les styles de colonne.
- Je ne sais pas si c'est la "HTML5 manière" tout le. Il semble que colgroup/col en html5, ce n'est vraiment utilisé pour le marquage des travées. MDN n'a pas fait mention de l'utilisation de l'attribut style sur le col des balises (autres qu'il hérite d'attributs globaux) et ne dit que des bgcolor: "...l'utilisation de la propriété CSS... sur les <td> les éléments." developer.mozilla.org/en-US/docs/Web/HTML/Element/col.
- A fonctionné pour moi avec le style de tableau table-layout: fixed; width: 100%;. Merci!
- Ce n'est pas une fin en soi/définitive, mais w3schools aussi ne mentionne pas l'utilisation de col pour cela. Il suggère l'utilisation de css appliquée à un <td> (ou un <th>) - w3schools.com/tags/att_td_width.asp
- A fonctionné pour moi (après j'ai googlé 'html5 colgroup').
- Votre solution a fonctionné comme un charme pour moi (merci) - pas d'efforts supplémentaires requis. Mais il peut être différent pour d'autres en fonction de leurs situations. Ou, peut-être que HTML5 est plus stable maintenant en 2017.
InformationsquelleAutor Hyathin
120

Juste ajouter <div> balise à l'intérieur de <td> ou <th> définir la largeur à l'intérieur de <div>.
Cela va vous aider. Rien d'autre ne fonctionne.

par exemple.
```
<td><div style="width: 50px" >...............</div></td>
```
- J'ai combiné cette solution avec spécifiant min-largeur/max-width pour la même pixels de largeur juste pour être sur le côté sécuritaire. Enfin c'est le travail. Je ne sais pas pourquoi, j'ai pour exécuter toutes ces extra-tours obtenez juste vraiment fixe, ridicule...
- Pas sûr que c'est mieux que de fixer de la même css style="width: 50px" sur le <td>
- C'est mieux parce que cela fonctionne, réglage de la largeur sur <td> ne l'est pas.
InformationsquelleAutor KAsun
62

Si vous avez besoin d'une ou plusieurs colonnes de largeur fixe, tandis que d'autres colonnes doivent redimensionner, essayez de définir à la fois min-width et max-width à la même valeur.
- Cela a fonctionné pour moi lors du réglage de la largeur de façon explicite avec table-layout: fixed; n'a pas.
- min-width est le tour est joué! Merci.
InformationsquelleAutor scrrr
28

Vous avez besoin d'écrire ce à l'intérieur de la CSS correspondant
```
table-layout:fixed;
```
- Ça ne fonctionne pas...
- mieux sorround table avec des balises div à l'intérieur de la div utilisation overflow:auto
- Travaillé pour moi quand je l'ai combiné avec des groupes de colonnes: <table style="table-layout: fixed"><colgroup><col style="width: 50%"><col style="width: 50%"></colgroup><tbody>...</tbody></table>.
- Ce Chris Coyer l'article l'explique bien: css-tricks.com/fixing-tables-long-strings
InformationsquelleAutor vinoth kumar
21

Ce que je fais, c'est:
1. Définir la td width:
```
<td width="200" height="50"></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 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">
```
Place l'attribut de classe de toute <td> vous le souhaitez.
- C'était la seule solution qui semble fonctionner dans tous les cas, sans imposer supplémentaire, potentiellement indésirables à des restrictions.
InformationsquelleAutor ErickBest
2

J'ai utilisé ce
```
.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
```
- N'oubliez pas ntch-enfant(2) (ou 3, 4 et ainsi de suite)
- table td nth-child(n+1) {...} couvrira tous les mais la première colonne
InformationsquelleAutor Svetoslav Marinov
2

Il permet également, à mettre dans le dernier "de remplissage de la cellule", avec largeur:auto. Cela permettra d'occuper l'espace restant, et de laisser tous les autres dimensions que celles spécifiées.

InformationsquelleAutor Mitja Gustin
1

Si vous ne voulez pas d'une disposition fixe, spécifier une classe pour la colonne à la taille appropriée.

CSS:
```
.special_column { width: 120px; }
```
HTML:
```
<td class="special_column">...</td>
```
- Je ne pouvais pas obtenir que cela fonctionne: jsfiddle.net/CGCFW/276
InformationsquelleAutor mcdado

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>

Pourriez-vous expliquer la réponse pour le rendre plus clair ?

InformationsquelleAutor Aaron Averill

Faire de la accepté de répondre à répondre pour les petits écrans plus petit que 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/

InformationsquelleAutor Willy Richardson

1

La définition de cette:
```
style="min-width:100px;" 
```
A fonctionné pour moi.

InformationsquelleAutor Priyanka Arora

Que par ma réponse ici, il est également possible d'utiliser un en-tête du tableau (qui peut être vide) et d'appliquer la largeur relative de chaque en-tête du tableau de la cellule. Les largeurs de toutes les cellules dans le corps de table seront conformes à la largeur de leur 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;
}

Afficher Les Résultats

Vous pouvez également utiliser colgroup comme suggéré dans Hyathin de réponse.

InformationsquelleAutor eicksl

-2

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

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

C'était le seul style que je nécessaire pour ajuster la largeur de colonne

InformationsquelleAutor user3229980
-5

Vous n'avez pas besoin de "fixed" - vous n'avez besoin de réglage overflow:hidden depuis la largeur de la colonne est définie.
- Ce qui permet de masquer le contenu derrière les bordures de cellule, pas une bonne idée.
InformationsquelleAutor Vladimír Hála

Vous devez vous connecter pour publier un commentaire.