html - 如何使一个表格列根据其内容自动调整大小，第二列填充所有空闲空间？

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

由于 Iaasch 建议使用 jQuery，解决方案非常简单

    $(document).ready(function() {
        $('#left').css('width', $('#places-table').width());
    });

    <table style="width: 100%;"> 
    <tr>     
        <td id="left">         
            <div id="list">     
                <table>
                    <tr>
                        <td>
                            ...
                        </td>
                    </tr>
                </table>
            </div>     
        </td>     
        <td style="width: auto;">         
            <div id="canvas">         
            </div>     
        </td> 
    </tr> 
</table>

Answer 3

当您将 a 设置为td时width:100%;，它意味着 100% 的tr。因此，它将是整行。尝试使正确的td喜欢width:75%;。

Answer 4

jQuery 是你的朋友。

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

在你有你的脚本的地方添加这个：

          $(document).ready(function() {
                  $('#left').css('width', $('#list').text().length * 7);
          })