表没有包装,一列有溢出并且尽可能大

Question

我有一个400px的固定宽度表,有3列.

<table>
    <tbody>
        <tr>
            <td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td><td class="narrow">Small1</td><td class="narrow">Small2</td></tr>
    </tbody>
</table>

这是CSS.

table
{
    table-layout: fixed;
    width: 400px;
}
td
{
    border: 1px solid #000;
    white-space: nowrap;
}
td.wide
{
    overflow: hidden;
    text-overflow: ellipsis;
}
td.narrow
{
}

这是JSFiddle.

目前,3列中的每一列占据空间的1/3.我想要的是第二列和第三列尽可能小(没有任何隐藏或文本包装)并让第一列占用空间的剩余部分(任何不适合隐藏的文本).

根据显示的数据,第2列和第3列可能需要更宽或更窄以适合其内容,因此我不想为任何列定义固定大小.

这可能吗？

Answer 1

这是我找到的唯一解决方案.这很丑陋,但它有诀窍:

http://jsfiddle.net/XA9kY/

事情是将字符串包装成溢出.... table

请注意table进入td.wide

<div style="width:400px; border: 1px solid red;">
    <table>
        <tbody>
            <tr>
                <td class="wide">
                    <table>
                        <tr>
                            <td>This is really really long and as much as possible should show but should eventually be cut off.
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="narrow">Small1</td>
                <td class="narrow">Small2</td>
            </tr>
        </tbody>
    </table>
</div>

这就是魔术

td.wide table
{
    width: 100%;
    table-layout: fixed;
}
td.wide table td
{
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

只需将字符串包装到tablewith table-layout: fixed;属性就可以了.