title: Two columns table : one as small as possible, the other takes the rest
body: <p>I have a to-columns table in a div :</p>
  
  <pre><code>&lt;div&gt;
  &lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="action" &gt;
          &lt;a&gt; ✔ &lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="content"&gt;
         &lt;p&gt;Bigger text...(variable size).......&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="action" &gt;
          &lt;a&gt; ✔ &lt;/a&gt;&lt;a&gt; ✘ &lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="content"&gt;
         &lt;p&gt;Bigger text...(variable size).......&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
        ... same structure in all the table
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Is there a way of doing this without fixing the columns width ?</p>
  
  <p>I tried with this: </p>
  
  <pre><code>table .action
  {
      width:auto;
      text-align:right;
  }
  table 
  {
      border-collapse:collapse;
      border-spacing:0;
      width:100%;
  }
  </code></pre>
  
  <p>But the left column takes half of the table...</p>