Two columns table : one as small as possible, the other takes the rest

Question

I have a to-columns table in a 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> 

And I would like the "action" column to fit the content, and the "content" column to take the rest of available space. The "action" column would look better with a right align. The table should also fit 100% of the container's width.

Is there a way of doing this without fixing the columns width ?

I tried with this:

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

But the left column takes half of the table...

Answer 1

Giving the content td a 100% width will force it to take as much space as it can, so .content{ width: 100% } should work.

Also give the .action a white-space: nowrap to make sure the x and the checkmark stay next to each other. Otherwise the content will be able to take even more space and force the icons below each other.

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>

Answer 2

Set the column width: 1px and white-space: nowrap.

This will try to make it 1px, but the nowrap will stop it from getting smaller than the widest element in that column.