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

概述我目前正在使用 HTML5中的Web应用程序,其中我有一个包含两列的表我希望第一列宽度为自动大小,因此它适合列内的内容和第二列宽度以填充所有备用空间 我尝试了以下方法： <table style="width: 100%;"><tr> <td style="display: inline-block"> <div id="list"> <table 我目前正在使用 HTML5中的Web应用程序,其中我有一个包含两列的表我希望第一列宽度为自动大小,因此它适合列内的内容和第二列宽度以填充所有备用空间

我尝试了以下方法：

<table ><tr>    <td >        <div ID="List">            <table>               ...            </table>        </div>    </td>    <td >        <div ID="canvas">        </div>    </td></tr>

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

任何的想法？

谢谢

解决方法 第一列的内容变为多行,因为唯一可用的自动调整模式是尝试尽可能缩小列的模式.如果您不希望包装内容,请使用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  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 >        <div ID="canvas">        </div>    </td></tr></table><br>Example 2:    <table  class=t1><tr>    <td>        <div ID="List">            <table >                <tr><td>Thingy stuff</td><td>foo bar</td></tr>                <tr><td>Thingy stuff</td><td>foo bar</td></tr>            </table>        </div>    </td>    <td >        <div ID="canvas">        </div>    </td></tr></table>

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

总结

以上是内存溢出为你收集整理的html – 如何根据内容和第二列将一个表列设置为自动大小以填充所有备用空间？全部内容，希望文章能够帮你解决html – 如何根据内容和第二列将一个表列设置为自动大小以填充所有备用空间？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。