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...

Unstick

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>

Faretheewell

is there a way to do the same without tables but div's instead? – Kenaz

Sure, just use the display: table-cell property (maybe also display: table-row on the div around them) and they should behave just like a table – Faretheewell

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.

Consignment

Right now (2021), setting the width to 0 works better. – Raze

Answer 3

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.

Indorse

I'm not sure, but I think it doesn't fit the requirements: the column should be as small as possible, but the content should be visible. Looks like with a 1% or 1px column, it wouldn't work. – Unstick

I think the problem is that you say to make the content column 1% when it should have been the action column. I think your idea is sound, you just mixed it up, though that shouldn't warrant a downvote, but merely a correction. The one advantage of your method is that I think it would handle certain situations better. If there are 2 columns, then the accepted 100% answer works. But what if there are 4 columns, and you want the first 3 to automatically adjust their widths accordingly, but the 4th column should be as small as possible. In that case, your 1% works, where the 100% won't. – Romie

Also, you didn't account for the 2 icons, which you almost surely want side by side, not one above the other, so you'd need to do the nowrap (like the accepted answer) – Romie

I also needed columns to take up as little horizontal space as possible. They contained either an orderindex, checkbox, or button. I started with this answer, width: 1%, but I enhanced it with adding the white-space: nowrap; to my class. This appears to work well on Chrome, IE. – Nguyen

Answer 4

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)

Fireworks