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

基本设置如下:

<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;功能来发出切割信号。

这是唯一的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>

使用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*/
}

溢出内容无法访问:(

这是一个快速的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";

一个小改动:(添加<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/

<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

相关内容

最新更新

热门标签：