制作“贪婪”表格单元格？

Question

我在表格中有一行，其中有 3 个单元格，其值为 A、B 和 C，表格是屏幕的整个宽度，这对于所有 3 个单元格来说绰绰有余。现在，当他们显示，所有单元格都占了房间的 1/3，但这不是我想要的。我希望第二个和第三个单元格是它们的“正确”大小，并且第一个单元格占据差异。我不能只设置它们的宽度，因为它们是动态大小的。我该怎么做？

Answer 1

只需将表格的宽度设置为 100%，将 A 的宽度设置为 100%，将 B 和 C 的宽度设置为自动。 经过测试和工作

<table border="1px" width="100%">
    <tr>
        <td width="100%">A</td>
        <td width="auto">BB</td>
        <td width="auto">CCC</td>
    </tr>
</table>

Answer 2

以像素为单位编码 A 和 C，并赋予 B 100% 的宽度

Answer 3

Rune 对 Pistos 评论的回答让我很接近。最后一步是将 style="white-space:nowrap" 添加到非贪婪列，给出：

<table border="1px" width="100%">
    <tr>
        <td width="100%">A wide column</td>
        <td style="white-space:nowrap">Compact column 1</td>
        <td style="white-space:nowrap">Another compact column</td>
    </tr>
</table>

在 Firefox 25 中为我工作。

Answer 4

我尝试了 Diodeus 和 Rune 的方法，但它不适用于我的示例。我最终在单元格 B 和 C 上进行了合并，因为我真的找不到任何东西。感谢您的帮助。

Answer 5

试试，

<table border="1px" width="100%">
    <tr>
        <td width="100%" height="100" style="background:#ff0000; display:block">A</td>
        <td width="100%" height="100" style="background:#00ff00; display:block">BB</td>
        <td width="100%" height="100" style="background:#ff00ff; display:block">CCC</td>
    </tr>
</table>