web-dev-qa-db-fra.com

Comment obtenir le <td> dans les tableaux HTML pour adapter le contenu, et laisser un <td> spécifique remplir le reste

Ceci est un exemple hypothétique:

table, thead, tbody, tr { width: 100%; }
    table { table-layout: fixed }
    table > thead > tr > th { width: auto; }
<table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th class="absorbing-column">Column D</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data A.1 lorem</td>
          <td>Data B.1 ip</td>
          <td>Data C.1 sum l</td>
          <td>Data D.1</td>
        </tr>
        <tr>
          <td>Data A.2 ipsum</td>
          <td>Data B.2 lorem</td>
          <td>Data C.2 some data</td>
          <td>Data D.2 a long line of text that is long</td>
        </tr>
        <tr>
          <td>Data A.3</td>
          <td>Data B.3</td>
          <td>Data C.3</td>
          <td>Data D.3</td>
        </tr>
      </tbody>
    </table>

Je souhaite que la largeur de chaque colonne corresponde à la taille de son contenu et laisse le reste de l'espace réservé à la colonne avec la classe "absorbing-column", qui se présente ainsi:

| HTML                                                                   | 100%
| body                                                                   | 100%
| table                                                                  | 100%
|------------------------------------------------------------------------|
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|
| Column A | Column B lorem | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|

Vous voyez, la colonne B est un peu plus grande que les autres en raison des données supplémentaires de la première ligne, mais la colonne D utilise toujours l’espace restant.

J'ai joué avec max-width, min-width, auto, etc. et je ne savais pas comment faire pour que cela fonctionne.

En d'autres termes, je veux que toutes les colonnes prennent la largeur dont elles ont besoin et pas plus, puis je veux que la colonne D utilise tout l'espace restant à l'intérieur du tableau des 100% largeur.

htmlcsshtml-tablewidth
43
user2985898

Définir la largeur de .absorbing-column

Ensemble table-layout à auto et définir une largeur extrême sur .absorbing-column.

Ici, j'ai défini le width sur 100% parce que cela garantit que cette colonne utilisera le maximum d’espace permis, tandis que les colonnes sans largeur définie seront réduites pour s’ajuster à leur contenu et pas davantage.

C'est l'un des avantages bizarres du comportement des tables. Le table-layout: auto _ algorithme est mathématiquement indulgent.

Vous pouvez même choisir de définir un min-width sur tous les td éléments pour éviter qu’ils ne deviennent trop étroits et que la table se comporte bien.

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid #ccc;
}
table .absorbing-column {
    width: 100%;
}
<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
61
gfullam

démo - http://jsfiddle.net/victor_007/ywevz8ra/

bordure ajoutée pour une meilleure vue (test)

plus d'infos sur espace-blanc 

table{
    width:100%;
}
table td{
    white-space: nowrap;  /** added **/
}
table td:last-child{
    width:100%;
}

    table {
      width: 100%;
    }
    table td {
      white-space: nowrap;
    }
    table td:last-child {
      width: 100%;
    }
<table border="1">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
24
Vitorino fernandes

Définir la largeur CSS à 1% ou 100% d'un élément en fonction de toutes les spécifications que j'ai pu trouver est lié au parent. Bien que Blink Rendering Engine (Chrome) et Gecko (Firefox) au moment de l'écriture semblent bien gérer ce 1% ou 100% (réduire une colonne ou remplir une colonne pour remplir l'espace disponible), cela n'est pas garanti selon toutes les spécifications CSS Je pourrais trouver pour le rendre correctement.

Une option consiste à remplacer tableau par CSS4 flex divs:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cela fonctionne dans les nouveaux navigateurs, c'est-à-dire IE11 +, voir le tableau au bas de l'article.

1
Mladen Adamovic