Régler la colonne de table constante de largeur quelle que soit la quantité de texte dans ses cellules?

Question

Dans ma table, je régler la largeur de la première cellule dans une colonne à 100px.
Toutefois, lorsque le texte dans l'une des cellules dans cette colonne est trop long, la largeur de la colonne devient plus 100px. Comment pourrais-je désactiver cette extension?

Answer 1

Je joue avec elle un peu parce que j'avais du mal à le découvrir.

Vous devez définir la largeur de cellule (soit de th ou td travaillé, je mets à la fois) et définissez les table-layout à fixed. Pour une raison quelconque, la largeur cellulaire semble ne rester fixe si la table largeur est réglée aussi (je pense que ce stupide, mais whatev).

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

Vous devez vous assurer de quitter tous les bordage et le dimensionnement des CSS, aussi.

Ok, donc 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>

Ici, il est en jsFiddle

Ce type avait un problème similaire: largeurs de cellules de table - largeur de fixation, d'emballage / tronquant les mots longs

Answer 2

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

Après la balise de table, utilisez l'élément de 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>

Answer 3

Il suffit d'ajouter balise <div> à l'intérieur <td> ou <th> définir à l'intérieur <div> largeur. Cela vous aidera. œuvres de rien d'autre.

par exemple.

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

Answer 4

Si vous avez besoin une ou plusieurs colonnes à largeur fixe tandis que d'autres colonnes doivent redimensionner, essayez de régler à la fois min-width et max-width à la même valeur.

Answer 5

Vous devez écrire ceci à l'intérieur du CSS correspondant

table-layout:fixed;

Answer 6

Ce que je fais est:

1. Régler la td width:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. Régler la td width avec 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 peu, mais il 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*/   
}

alors:

<td class="td_size">

Placez l'attribut de classe à tout <td> que vous voulez.

Answer 7

J'ai utilisé cette

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

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

Answer 8

Il aide aussi à mettre dans la dernière "cellule de charge", avec width: auto . Cela occupera l'espace restant, et laisser toutes les autres dimensions spécifiées.

Answer 9

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

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Answer 10

KASUN a la bonne idée. Voici le code correct ...

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

Answer 11

Faites la répondent réponse acceptée pour les petits écrans lorsque plus petits 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/

Answer 12

Comme par ma réponse , il est également possible de utiliser un tête de table (qui peut être vide) et appliquer des largeurs relatives de chaque cellule de tête de la table. Les largeurs de toutes les cellules dans le corps de la table se conforment à la largeur de la 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.

Answer 13

Réglage ceci:

style="min-width:100px;" 

a marché pour moi.

Answer 14

J'ai trouvé la réponse de KASUN fonctionne mieux avec vw au lieu de px comme ceci:

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

Cela a été le seul que je styling besoin d'ajuster la largeur de colonne

Answer 15

Vous ne pas besoin de définir "fixed" -. Tout ce que vous avez besoin est la mise en overflow:hidden puisque la largeur de colonne est réglée