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

css, html

Solution

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.

Problem

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

Original source