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


Dans ma table, je définis la largeur de la première cellule dans une colonne 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?


436
2017-12-16 04:44


origine


Réponses:


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

Vous devez définir la largeur de la cellule (soit th ou td travaillé, j'ai défini les deux) et définir le table-layout à fixed. Pour une raison quelconque, la largeur de la cellule ne semble rester fixe que si la largeur de la table est définie également (je pense que c'est idiot, mais ça reste). Il est également utile de définir la propriété overflow sur hidden.

Vous devriez vous assurer de laisser tout le bordage et le calibrage pour CSS, aussi.

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 dans JSFiddle

Ce gars avait un problème similaire: Largeurs de cellules de table - largeur de fixation, envelopper / tronquer des mots longs


515
2017-12-16 06:04



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

Après l'étiquette de la 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>

126
2018-04-08 16:15



Ajoutez simplement <div> tag à l'intérieur <td> ou <th> définir la largeur à l'intérieur <div>. Cela vous aidera. Rien d'autre ne fonctionne.

par exemple.

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

116
2018-05-06 22:25



Si vous avez besoin d'une ou plusieurs colonnes à largeur fixe alors que d'autres colonnes doivent être redimensionnées, essayez de définir les deux min-width et max-width à la même valeur.


59
2017-09-06 12:28



Vous devez écrire ceci dans le CSS correspondant

table-layout:fixed;

29
2017-12-16 04:47



Ce que je fais est:

  1. Définissez la largeur td:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
    
  2. Définissez la largeur du td avec CSS:

    <td style="width:200px; height:50px;">
    
  3. Définissez à nouveau la largeur en tant que 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 la classe à n'importe quel <td> tu veux.


21
2018-06-26 05:31



J'ai utilisé ça

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

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

2
2018-05-10 21:40



Ça aide aussi, 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
2018-05-04 08:19