4

我有一个 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
{
}

这是JSFiddle。

目前，3 列中的每一列都占用了 1/3 的空间。我想要的是第二和第三列尽可能小（没有任何隐藏或文本包装），并且第一列占据剩余空间（任何不适合隐藏的文本）。

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

这可能吗？

4

2 回答 2

7

这是我找到的唯一解决方案。这很丑陋，但它确实有效：

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

只需将字符串包装到tablewithtable-layout: fixed;属性中就可以了。

于 2013-11-13T18:16:39.800 回答
2

这是我的尝试：（示例）

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

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

编辑
通过仅设置高度来隐藏更宽单元格中的文本的可能解决方案。
还添加了所有单元格的行高，因此您可以根据您所追求的设置进行更改。这里（示例）

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;
}
于 2013-11-13T18:49:45.553 回答