Question

以下是基本设置：

<table>
    <tr>
        <td id="short">A medium width cell.</td>
    </tr>
    <tr>
        <td id="long" style="overflow: hidden; text-overflow: ellipsis;">A long long long long long long cell.</td>
    </tr>
</table>

（另见http://jsfiddle.net/vp1rzrnt/。）

我想实现第二个表行中的#long单元格在#short单元格上的宽度不会扩展，只是被切断了。

不幸的是，像我一样设置overflow: hidden并没有成功。

修改

我无法设置固定宽度，因为内容是动态的。

编辑2

理想情况下，我希望仍能使用text-overflow: ellipsis;功能来表示切割。

Answer 1

使用td内容的包装器，您实际上可以减小其宽度。 DEMO

HTML包装

<td id="long" style="overflow: hidden;"><p>A long long long long long long cell.</p></td>

CSS

tr + tr td p{
    margin:0;
    margin-right:-1000px;/* hudge negative margin to reduce virtually width to  nothing*/
}

溢出的内容无法获得：（

Answer 2

这只是 css 解决方案。

GCyrillus [Soln]和[Soln]之前解决方案的混合。

jsFiddle：http://jsfiddle.net/vp1rzrnt/8/

更新：

td {
    border: solid;
    display:block;
}
#short, #long {
    width:100%;
}
#long {
    margin-right:-1000px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

html ：没有其他标签

<table>
    <tr>
        <td id="short">A medium width cell.</td>
    </tr>
    <tr>
        <td id="long">A long long long long long long cell.</td>
    </tr>
</table>

Answer 3

这是一个快速的jQuery解决方案：http://jsfiddle.net/vp1rzrnt/3/

$(function(){$("#long").width($("#short span").width());});

js中的类似内容：http://jsfiddle.net/vp1rzrnt/2/

long.style.width = s_span.offsetWidth + "px";

html中的lil更改:(已添加<span>）

<table>
    <tr>
        <td id="short"><span id="s_span">A medium width cell.</span></td>
    </tr>
    <tr>
        <td id="long">A long long long long long long cell.</td>
    </tr>
</table>

<小时/> FOR text-overflow:ellipsis;：http://jsfiddle.net/vp1rzrnt/5/

<强> HTML

<table>
    <tr>
        <td id="short"><span id="s_span">A medium width cell.</span>
        </td>
    </tr>
    <tr>
        <td id="long">
            <p id="long_p">A long long long long long long cell.</p>
        </td>
    </tr>
</table>

<强> CSS

td {
    border: solid;
}
#long_p {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:0;
    margin:0;
}

<强>的jQuery

$("#long_p").width($("#s_span").width());

设置表格单元格相对于列中其他单元格的宽度

修改

编辑2

3 个答案: