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

I have a to-columns table in a div :

<div>
<table>
  <tbod开发者_运维百科y>
    <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...

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>

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.

I found this answer when trying to make one column of many as small as possible.

Giving the content td a 1% width will force it to take as little space as it can, so .content{ width: 1% } worked for me.

The bootstrapian way of doing this:

<div class="row">
    <div class="col-sm-1"> content... </div>
    <div class="col"> content... </div>
</div>

Basically you need to try out different things keeping in mind the following:

• col-sm Small column
• col-sm-1 Smallest column
• col-sm-2 Slightly bigger than smallest column (Numbers go from 1 to 12)
• col-md Medium sized columns (same numbering rule)
• col-lg Large sized columns (same numbering rule)