如何让最右边的列填充剩余空间？

Posted 2023-03-06

【中文标题】如何让最右边的列填充剩余空间？

【英文标题】：How do I get the rightmost column to fill the remaining space?

【发布时间】：2013-04-14 19:16:09

【问题描述】：

假设我有一个只有三个小列的表。将一张又窄又高的桌子贴在屏幕左侧 (example) 看起来很不整洁且不平衡，所以我希望桌子能覆盖页面的宽度。但是，当我将表格宽度设置为 100% 时，所有列也会被拉伸，所以现在我的数据在屏幕上散布得很薄，看起来也很不整齐 (example)。

我正在寻找一种解决方案，其中所有列的大小与表为width: auto 时的大小相同，但最后一列填充了屏幕上的剩余空间。这就是 Spotify 所做的，例如：

无论如何，“用户”列将覆盖剩余的宽度。有没有一种相对简单的方法可以通过 html 表格和 CSS 实现这一点？

【参考方案1】：

如果这是你的意思：

然后我可以使用具有以下 css 的标准 html 表结构来实现：

table 
  width:auto;

td 
  white-space:nowrap;

td:last-child 
  width:100%;

--编辑：work with your jsfiddle

【讨论】：

在我的场景中，最后一列是多行列。在这种情况下，此 css 无法按预期运行。这是示例代码***.com/a/50098150/874366

【参考方案2】：

我找到了一个简单的解决方案：

table td:last-child 
    width: 100%;

结果：

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>$2</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td>3</td>
        <td>$3</td>
    </tr>
    <tr>
        <td>Sausage</td>
        <td>10</td>
        <td>$0.5</td>
    </tr>
    <tr>
        <td>Pineapple</td>
        <td>2</td>
        <td>$8</td>
    </tr>
    <tr>
        <td>Tomato</td>
        <td>5</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>Lightsaber</td>
        <td>2</td>
        <td>$99 999</td>
    </tr>
</table>

这在我当前的情况下似乎有效，但在其他情况下看起来可能会导致不必要的副作用。如果我偶然发现，我会编辑这个答案。

可能的副作用

多字表格单元格将被包装成多行以使列尽可能窄。一种解决方案是在表格单元格上使用white-space: nowrap，但这会阻碍包含大量文本的单元格在应换行时进行换行。

【讨论】：

尝试用2个长单词填充一个产品，单词会折叠到下一行，你需要一个空格：nowrap;对每个 td，检查我的答案

感谢空白：nowrap 提示...这就是我要找的！

如果前面的列之一只包含一张图片，那么即使设置了 nowrap，图片也会缩小到很小的尺寸。