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

I have a basic table with four columns (let's call them A, B, C, D) and a specific desired width, 600px. The contents are all text. What I want is for the column widths to be allocated as follows:

我有一个包含四列的基本表（让我们称之为A，B，C，D）和特定的所需宽度，600px。内容全是文字。我想要的是如下分配列宽：

• Columns A-C are just wide enough to fit the text without any wrapping, no wider
• 列A-C的宽度足以适合文本而不需要任何包装，也不会更宽
• Column D gets whatever width is left over, and cuts off any overflow instead of wrapping to a new line.
• D列获得剩余的任何宽度，并切断任何溢出而不是换行到新行。

How can I accomplish this with CSS?

我怎样才能用CSS实现这个目标？

This is the closest I've gotten:

这是我得到的最接近的：

    <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>

In this case the width for Columns A, B, and C has nothing to do with the content. It gives the cells too much space for short text and too little space for long text. It does, however, properly truncate Column D.

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

I also tried setting the widths of Columns A-C to 1% and Column D to 100%, but then they all run together at the left edge of the table.

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

Any ideas how I can get that width calculation?

我有什么想法可以得到宽度计算？

1 个解决方案

#1

Might you want some thing like this http://jsfiddle.net/2qHY3/3/ ..?

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

by removing

通过删除

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

from the last <td>

从最后一个开始