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

时间:2012-02-23 09:46:06

标签: html css html-table overflow

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

  • 列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%,但是它们都在表的左边缘一起运行。

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

1 个答案:

答案 0 :(得分:0)

你可能想要这样的事情http://jsfiddle.net/2qHY3/3/ ..?

删除

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

来自上一个<td>