web-dev-qa-db-fra.com

Définir la constante de largeur de colonne de table indépendamment de la quantité de texte dans ses cellules?

Dans mon tableau, la largeur de la première cellule d'une colonne est définie sur 100px.
Toutefois, lorsque le texte de 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?

htmlcsscolumn-width
470
Misha Moroshko

J'ai joué avec pendant un moment parce que j'avais du mal à le comprendre. 

Vous devez définir la largeur de la cellule (que ce soit th ou td, je règle les deux) ET définir le table-layout sur fixed. Pour une raison quelconque, la largeur de la cellule ne semble rester fixe que si la largeur de la table est définie (je pense que c'est idiot mais quoi de plus). Il est également utile de définir la propriété de débordement sur masqué.

Vous devez également vous assurer de laisser toutes les bordures et les dimensions pour CSS.

Ok, 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;
    width: 100px;
}

La voici en JSFiddle

Ce gars avait un problème similaire: Largeurs de cellules de tableau - largeur de fixation, habillage/troncation de mots longs

547
ptpaterson

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 avez trois colonnes:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
142
Hyathin

Il suffit d’ajouter une balise <div> dans <td> ou <th> pour définir la largeur dans <div>. Cela vous aidera. Rien d'autre ne fonctionne.

par exemple. 

<td><div style="width: 50px" >...............</div></td>
120
KAsun

Si vous avez besoin d'au moins une colonne de largeur fixe alors que d'autres colonnes doivent être redimensionnées, essayez de définir min-width et max-width sur la même valeur.

61
scrrr

Vous devez écrire ceci dans le CSS correspondant

table-layout:fixed;
28
vinoth kumar

Ce que je fais c'est:

  1. Définissez 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. Définissez à nouveau la largeur sur 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 ce faire, vous devrez peut-être insérer les valeurs CSS dans une classe de 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 sur le <td> de votre choix.

21
ErickBest

Il est également utile d'insérer la dernière "cellule de remplissage", avec width: auto . Cela occupera l'espace restant et laissera toutes les autres dimensions spécifiées. 

2
Mitja Gustin

J'ai utilisé ça

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

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

Si vous ne voulez pas d'une mise en page fixe, spécifiez une classe pour que la colonne ait une taille appropriée.

CSS: 

.special_column { width: 120px; }

HTML: 

<td class="special_column">...</td>
1
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>
1
Aaron Averill

Faites en sorte que la réponse acceptée réponde pour les petits écrans lorsqu'elle est inférieure à la largeur fixée.

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
Willy Richardson

Selon ma réponse ici , il est également possible d'utiliser un tête de table (qui peut être vide) et appliquez des largeurs relatives pour chaque cellule de la tête de tableau. Les largeurs de toutes les cellules du corps du tableau seront conformes à la largeur de leur 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

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

0
eicksl

Réglage ceci:

style="min-width:100px;"

Travaillé pour moi.

0
Priyanka Arora