如何根据内容和第二列使一个表列为自动大小以填充所有备用空间？

Question

我目前正在使用HTML5中的Web应用程序,其中我有一个包含两列的表我希望第一列宽度为自动大小,因此它适合列内的内容和第二列宽度以填充所有备用空间

我尝试了以下方法:

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

但是第二列总是占用比它应该更宽的空间,这导致第一列表行是多行而不是一行.

任何的想法？

谢谢

Answer 1

第一列的内容变为多行,因为唯一可用的自动调整模式是尝试尽可能缩小列的模式.如果您不希望包装内容,请明确指定使用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>

无需使用JavaScript,也无需将右侧单元格设置为针对特定左侧单元格内容量身定制的特定宽度.

Answer 2

当您将 a 设置td为时width:100%;，表示 100% tr。因此，它将是整行。尝试制作右侧的td类似width:75%;.