Table cell take minimum possible width

Question

In table with table-layout set to auto & width: 100%, is it possible to instruct column/table cells to take least width possible? For instance, I have a column with three action buttons with white-space:nowrap, and I would like this column/cells to take exactly enough width to show three buttons in one line.

Another approach would to to instruct one column to take max possible width.

Answer 1

You can set the widths of the columns to 0% versus 100%. The rendering engines will automatically widen the narrow column(s) as required to fit the content.

Here is a fiddle demonstrating the behavior: http://jsfiddle.net/nog2oqjx/

Markup:

<table>
    <tr>
        <td>
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </td>
        <td>
        </td>
    </tr>
</table>

Styles:

table { width: 100%; }
tr  { width: 100%; }
td { width: 0%; background-color: green; padding: 10px; }
td:last-of-type { width: 100%; background-color: yellow; }
button { width: 40px;}