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

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

这只是 css 解决方案。

GCyrillus[Soln] 和 my[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 2

使用 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 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 的小改动：（添加 <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>

---

对于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());