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

当您将td设置为width:100%;时，它意味着tr的100％。所以，它将是整行。尝试正确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);
          })

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

4 个答案: