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


535

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?


5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table pourrait vous aider à vous orienter dans la bonne direction
justinl

2
Dans mon cas, il n'y a pas eu d'expansion, mais l'inverse: rétrécissement indésirable de la largeur malgré ma déclaration de largeur explicite. Ridicule!
Csaba Toth

La seule solution correcte à ce problème consiste à utiliser colgroup contenant des cols et à définir la largeur des cols.
MightyPork

table-layout:fixed;est la solution
emfi

Réponses:


607

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


77
Il est important de le remarquer: "Le navigateur définira ensuite les largeurs des colonnes en fonction de la largeur des cellules de la première ligne du tableau", dans stackoverflow.com/questions/570154/…
daniloquio

12
Cela 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 occuper l'espace restant.
Daniel Little

2
@DanielLittle vous pouvez également définir la largeur de la table à 1 px; avec overflow: visiblepour les tableaux de taille dynamique, tant que la taille des cellules est fixe et que le débordement est visible, peu importe si la taille du tableau lui-même est plus grande ou plus petite que les cellules réelles.
Mahn

Que pourriez-vous faire si votre td a "largeur = 30%;"?
71GA

Veuillez ajouter le débordement: caché @ RokoC.Buljan
Alex Grande

178

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>

26
Cette! C'est la réponse HTML5 et ça marche sans que je sois obligé de sauter à travers des cerceaux stupides. De plus, vous pouvez utiliser <col class = "someClassName"> à la place pour conserver vos largeurs en CSS et ne pas polluer votre HTML avec des informations de style.
John Munsch

2
@Sam, vous avez peut-être rencontré un autre problème qui l'a supplanté, comme le CSS, le style en ligne ou un doctype incorrect, etc.
Sameer Alibhai

Je ne sais pas du tout s'il s'agit de la «méthode HTML5». Il semble que colgroup / col en html5 ne soit vraiment utilisé que pour marquer des plages. MDN ne fait aucune mention de l'utilisation de l'attribut style sur les balises col (à part qu'il l'hérite des attributs globaux) et dit seulement de bgcolor: "... utilisez la propriété CSS ... sur les éléments <td> pertinents." developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer

5
A travaillé pour moi avec un style de table table-layout: fixed; width: 100%;. Merci!
nrodic

Ce n'est pas final / définitif, mais w3schools ne mentionne pas non plus l'utilisation de colpour cela. Il suggère l'utilisation de css appliquée à un <td>(ou un <th>) - w3schools.com/tags/att_td_width.asp
Don Cheadle

128

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>

2
J'ai combiné cette solution en spécifiant également min-width / max-width pour la même largeur de pixels juste pour être du bon côté. Enfin ça marche. Je ne sais pas pourquoi je dois exécuter tous ces tours supplémentaires pour que ce soit vraiment fixe, ridicule ...
Csaba Toth

1
Vous ne savez pas comment cela vaut mieux que de définir ce même CSS style="width: 50px"sur le<td>
Don Cheadle

2
@mmcrae C'est mieux parce que cela fonctionne, la définition de la largeur <td>ne l'est pas.
Madbreaks

66

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.


Cela a fonctionné pour moi lors du réglage explicite de la largeur avec table-layout: fixed;.
Jordan Mack

Putain de merde! Aucune des autres solutions n'a fonctionné ou n'était trop maladroite! Cela a parfaitement fonctionné! Pas de div requis aussi!
NeilRoy

29

Vous devez écrire ceci dans le CSS correspondant

table-layout:fixed;

meilleure table de contournement avec les balises div puis à l'intérieur du débordement de l'utilisation de div: auto
vinoth kumar

A fonctionné pour moi lorsque 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>.
Russ Bateman

Cet article de Chris Coyer l'explique bien: css-tricks.com/fixing-tables-long-strings
cssyphus

24

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.


C'était la seule solution qui semblait fonctionner dans tous les cas sans imposer de restrictions supplémentaires potentiellement indésirables.
Sam

3

J'ai utilisé ça

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

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

N'oubliez pas ntch-child (2) (ou 3, 4 et ainsi de suite)

table td nth-child (n + 1) {...} couvrira tout sauf la première colonne
Ed Randall

2

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>

2

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é.


2

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/



1

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>

1

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.


0

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.


-4

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


-5

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.


3
Ce qui cachera le contenu derrière les bordures des cellules, ce n'est pas une bonne idée.
mystrdat
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.