web-dev-qa-db-fra.com

Table à deux colonnes: l'une aussi petite que possible, l'autre prend le reste

J'ai une table to-columns dans une div:

<div>
<table>
  <tbody>
    <tr>
      <td class="action" >
        <a> ✔ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
    <tr>
      <td class="action" >
        <a> ✔ </a><a> ✘ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
      ... same structure in all the table
  </tbody>
</table>
</div>

Et j'aimerais que la colonne "action" corresponde au contenu, et la colonne "contenu" qu'elle occupe le reste de l'espace disponible. La colonne "action" serait plus belle avec un alignement à droite. La table doit également s'adapter à 100% de la largeur du conteneur.

Existe-t-il un moyen de le faire sans fixer la largeur des colonnes?

J'ai essayé avec ça:

table .action
{
    width:auto;
    text-align:right;
}
table 
{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}

Mais la colonne de gauche occupe la moitié du tableau ...

htmlcsshtml-tableautosize
45
Julien

Donner au contenu td une largeur de 100% le forcera à prendre autant d'espace que possible, donc .content{ width: 100% } devrait marcher.

Donnez également à l'action. white-space: nowrap pour vous assurer que le x et la coche restent côte à côte. Sinon, le contenu pourra prendre encore plus de place et forcer les icônes les unes en dessous des autres.

table .action
{
    width:auto;
    text-align:right;
    white-space: nowrap
}
table .content { 
    width: 100% 
}
table 
{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    border: 1px solid
}
<table>
  <tbody>
    <tr>
      <td class="action" >
        <a> ✔ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
    <tr>
      <td class="action" >
        <a> ✔ </a><a> ✘ </a>
      </td>
      <td class="content">
       <p>Bigger text...(variable size).......</p>
      </td>
    </tr>
  </tbody>
</table>
38
Stephan Muller

Définissez la colonne width: 1px et white-space: nowrap.

Cela tentera de le rendre 1px, mais le nowrap l'empêchera de devenir plus petit que l'élément le plus large de cette colonne.

20
Kirk Douglas Jr

J'ai trouvé cette réponse en essayant de faire une colonne de plusieurs aussi petite que possible.

Donner au contenu td un 1% width le forcera à prendre le moins d'espace possible, donc .content{ width: 1% } a fonctionné pour moi.

15
samjewell