Html 如何让最右边的列填充剩余空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16137757/
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 get the rightmost column to fill the remaining space?
提问by Hubro
Say I have a table with only three small columns. It looks untidy and unbalanced to have a narrow, tall table hugging the left side of my screen (example), so I'd like the table to cover the width of the page. However, when I set the table width to 100%, all the columns are stretched out as well, so now my data is spread thinly across the screen, which also looks untidy (example).
假设我有一个只有三个小列的表。屏幕左侧有一张又窄又高的桌子（示例），看起来不整洁且不平衡，所以我希望桌子能覆盖页面的宽度。但是，当我将表格宽度设置为 100% 时，所有列也都被拉伸了，所以现在我的数据在屏幕上散布得很细，这看起来也不整洁（示例）。
What I'm looking for is a solution where all the columns have the same size as they would have had if the table was width: auto, but the final column fills the remaining space on the screen. This is what Spotify does, for example:
我正在寻找的是一种解决方案，其中所有列的大小都与表为 时的大小相同width: auto，但最后一列填充了屏幕上的剩余空间。这就是 Spotify 所做的，例如：
The "User" column will cover the remaining width, no matter what. Is there a relatively simple way of achieving this with HTML tables and CSS?
无论如何，“用户”列将覆盖剩余的宽度。是否有一种相对简单的方法可以使用 HTML 表格和 CSS 来实现这一点？
回答by Hubro
I have found a simple solution:
我找到了一个简单的解决方案：
table td:last-child {
width: 100%;
}
Result:
结果：
body {
font: 12px "Sans serif";
}
table {
width: 100%;
background-color: #222222;
color: white;
border-collapse: collapse;
}
table th {
padding: 10px;
text-align: left;
}
table td {
padding: 2px 10px;
}
table td:last-child {
width: 100%;
}
table td:nth-child(odd), table th:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.05);
}
table tr:last-child td {
padding-bottom: 10px;
}<table>
<tr>
<th>Product</th>
<th>Cardinality</th>
<th>Price per item</th>
</tr>
<tr>
<td>Apple</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>Pear</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>Sausage</td>
<td>10</td>
<td>table {
width:auto;
}
td {
white-space:nowrap;
}
td:last-child {
width:100%;
}
.5</td>
</tr>
<tr>
<td>Pineapple</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Tomato</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>Lightsaber</td>
<td>2</td>
<td> 999</td>
</tr>
</table>This appears to work in my current scenario, but it looks like something that can cause unwanted side effects in other situations. If I stumble across any, I'll edit this answer.
这在我当前的场景中似乎有效，但在其他情况下看起来可能会导致不必要的副作用。如果我偶然发现任何，我会编辑这个答案。
Possible side effects
可能的副作用
- Multi-word table cells will be wrapped into multiple lines to keep the column as narrow as possible. One solution is to use
white-space: nowrapon the table cells, but that will hinder cells with lots of text from wrapping when they should.
- 多字表格单元格将被包装成多行以保持列尽可能窄。一种解决方案是
white-space: nowrap在表格单元格上使用，但这会阻止包含大量文本的单元格在应该换行时进行换行。
回答by AzDesign
If this is what you meant : imagethen I can achieve that using standard html table structure with the following css :
如果这就是您的意思：图像，那么我可以使用标准 html 表结构和以下 css 来实现：
##代码##--EDIT : work with your jsfiddle
--编辑：使用你的 jsfiddle
