html - 获取指定宽度的表格行以将所有内容保持在一行上并根据需要截断一个单元格？ (HTML/CSS)

Question

我有一个包含四列(我们称它们为 A、B、C、D)和特定所需宽度 600 像素的基本表格。内容均为文字。我想要的是按如下方式分配列宽:

• A-C 列的宽度刚好足以容纳文本，没有任何换行，没有更宽
• D 列获得剩余的任何宽度，并切断所有溢出而不是换行。

如何使用 CSS 实现这一点？

这是我得到的最接近的:

    <table style="width: 600px; table-layout: fixed;">
        <thead>
            <th style="white-space: nowrap;">Column A</th>
            <th style="white-space: nowrap;">Column B</th>
            <th style="white-space: nowrap;">Column C</th>
            <th>Column D</th>
        </thead>
        <tbody>
            <tr>
                <td style="white-space: nowrap;">12345</td>
                <td style="white-space: nowrap;">Some Text</td>
                <td style="white-space: nowrap;">Some More Text</td>
                <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">                        
                        Some very long text goes here.  This text is going to get cut off.  It won't all fit in this cell.  I hope it doesn't wrap onto a second line.  That would be bad.
                </td>
            </tr>
        </tbody>
    </table>

在这种情况下，A、B 和 C 列的宽度与内容无关。它为单元格提供了太多空间用于短文本，而为长文本提供了太小空间。但是，它确实会正确截断 D 列。

我还尝试将 A-C 列的宽度设置为 1%，将 D 列的宽度设置为 100%，但随后它们都在表格的左边缘一起运行。

关于如何计算宽度的任何想法？

Answer 1

您可能想要这样的东西 http://jsfiddle.net/2qHY3/3/ ..?

通过移除

white-space: nowrap;text-overflow: ellipsis;

从最后<td>