How do I make one table column to be auto size according to its content and second column to fill all the spare space?

Question

I am currently working on a web application in HTML5, where I have a table with two columns I want the first column width to be auto size so it's fit the content inside the column and the second column width to fill all the spare space

I tried the following:

<table style="width: 100%;">
<tr>
    <td style="display: inline-block">
        <div id="list">
            <table>
               ...
            </table>
        </div>
    </td>
    <td style="width: 100%;">
        <div id="canvas">
        </div>
    </td>
</tr>

But the second column always takes more width space than it should which cause the first column table rows to be multiline instead of one line.

Any idea?

Thanks

Answer 1

The first column's contents become multi-line because the only auto-size mode available is one that tries to shrink the column as much as possible. If you don't want the contents to wrap, specify this explicitly using white-space: nowrap.

.t1, .t2 { border-collapse: collapse; }
.t1 > tbody > tr > td { border: 1px solid red; }
.t2 > tbody > tr > td { border: 1px solid blue; }

.t3 td { white-space: nowrap; }

Example 1:
<table style="width: 100%;" class=t1>
<tr>
    <td>
        <div id="list">
            <table class=t2>
                <tr><td>Thingy stuff</td><td>foo bar</td></tr>
                <tr><td>Thingy stuff</td><td>foo bar</td></tr>
            </table>
        </div>
    </td>
    <td style="width: 100%;">
        <div id="canvas">
        </div>
    </td>
</tr>
</table>

<br>
Example 2:
    
<table style="width: 100%;" class=t1>
<tr>
    <td>
        <div id="list">
            <table class="t2 t3">
                <tr><td>Thingy stuff</td><td>foo bar</td></tr>
                <tr><td>Thingy stuff</td><td>foo bar</td></tr>
            </table>
        </div>
    </td>
    <td style="width: 100%;">
        <div id="canvas">
        </div>
    </td>
</tr>
</table>

No need to use JavaScript, and no need to set the right-hand cell to a specific width tailored for specific left-hand cell content.