Question

我有一个400像素的固定宽度表，有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
{
}

Here is the 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;
}

只需将字符串包装到table table-layout: fixed;属性即可。

Answer 2

我在此尝试：(Example)

<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="rest">Small1</td>
            <td class="rest">Small2</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 400px;
}
table td {
    border: 1px solid #000;
}
td.rest {
    width:1px;
}

唯一的问题是它不喜欢：

overflow: hidden;
text-overflow: ellipsis;

如果这不是问题，那么这应该有效。

修改
一种可能的解决方案，通过设置高度来隐藏更宽的单元格中的文本还添加了所有单元格的行高，以便您可以根据之后的设置更改这两个单元格。这里是(Example)

table { width: 400px; } table td { border: 1px solid #000; line-height:26px; } td.rest { width:1px; white-space: nowrap; } td.wide { overflow:hidden; height:26px; display:block; }

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

2 个答案: