Html 如何使一个表格列根据其内容自动调整大小，并使第二列填充所有空闲空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11671559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make one table column to be auto size according to its content and second column to fill all the spare space?
提问by Shahaf
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
我目前正在使用 HTML5 开发一个 Web 应用程序，其中有一个包含两列的表格，我希望第一列的宽度为自动大小，以便它适合列内的内容，第二列的宽度可以填充所有空闲空间
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
谢谢
回答by Roman Starkov
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.
第一列的内容变成多行，因为唯一可用的自动调整大小模式是尝试尽可能缩小列。如果您不想包装内容，请使用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.
无需使用 JavaScript，也无需将右侧单元格设置为为特定左侧单元格内容量身定制的特定宽度。
回答by Shahaf
The solution is pretty simple thanks to Iaasch suggestion to use jQuery
由于 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>
回答by Biotox
When you set a tdto width:100%;, it means 100% of the tr. So, it will be the entire row. Try making the right tdlike width:75%;.
当您将 a 设置为td时width:100%;，表示 100% 的tr. 因此，它将是整行。尝试做出正确的td像width:75%;。
回答by laasch
jQuery is your friend.
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>
and where you have your scripts add this:
并在您的脚本中添加以下内容：
$(document).ready(function() {
$('#left').css('width', $('#list').text().length * 7);
})
