CSS TD-REDICE表宽，不灵活

我有一个表，我想安装固定的宽度 30px 在 td. 问题是当文本中 td 太长， td 伸展宽 30px.
Overflow:hidden

也不起作用 td, 我需要一些方法来隐藏拥挤的文本并保存宽度 td 30px.


<table cellpadding="0" cellspacing="0">

<tr>

<td>first</td><td>second</td><td>third</td><td>forth</td>

</tr>

<tr>

<td>first</td><td>this is really long</td><td>third</td><td>forth</td>

</tr>

</table>
2021-03-21 添加评论
分享

没有找到相关结果

    已邀请:

    董宝中

    赞同来自:

    这不是最美丽的 CSS, 但我得到了它：


    table td {
    
 width: 30px;
    
 overflow: hidden;
    
 display: inline-block;
    
 white-space: nowrap;
    
}


    带椭圆和没有它们的例子：


    body {
    
 font-size: 12px;
    
 font-family: Tahoma, Helvetica, sans-serif;
    
}
    

    
table {
    
 border: 1px solid #555;
    
 border-width: 0 0 1px 1px;
    
}
    
table td {
    
 border: 1px solid #555;
    
 border-width: 1px 1px 0 0;
    
}
    

    
/* What you need: */
    
table td {
    
 width: 30px;
    
 overflow: hidden;
    
 display: inline-block;
    
 white-space: nowrap;
    
}
    

    
table.with-ellipsis td { 
    
 text-overflow: ellipsis;
    
}



    <table cellpadding="2" cellspacing="0">
    
<tr>
    
<td>first</td><td>second</td><td>third</td><td>forth</td>
    
</tr>
    
<tr>
    
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    
</tr>
    
</table>
    
<br/>
    
<table cellpadding="2" cellspacing="0" class="with-ellipsis">
    
<tr>
    
<td>first</td><td>second</td><td>third</td><td>forth</td>
    
</tr>
    
<tr>
    
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
    
</tr>
    
</table>
    2021-03-21 0 0
    分享

    郭文康

    赞同来自:

    您也可以尝试使用它：


    table {
    
 table-layout:fixed;
    
}
    
table td {
    
 width: 30px;
    
 overflow: hidden;
    
 text-overflow: ellipsis;
    
}


    http://www.w3schools.com/cssre ... t.asp
    2021-03-21 0 0
    分享

    窦买办

    赞同来自:

    它不仅会增长

    细胞表

    ，还有自己

    桌子

    .
    为避免此，您可以分配一个固定的宽度表，又致尊重小区的宽度：


    table {
    
 table-layout: fixed;
    
 width: 120px; /* Important */
    
}
    
td {
    
 width: 30px;
    
}


    /使用
    overflow: hidden

    和 / 或者
    text-overflow: ellipsis

    可选地，强烈推荐用于更好的视觉感知。/

    因此，如果您的情况允许您分配表的固定宽度，则此解决方案可能是其他数据答案的最佳替代方案。 /哪种固定或没有固定宽度的工作/
    2021-03-21 0 0
    分享

    奔跑吧少年

    赞同来自:

    提案销毁了我桌子的布局，所以我最终使用了：


    td {
    
 min-width: 30px;
    
 max-width: 30px;
    
 overflow: hidden;
    
}


    它是非常维护的，但它比重做所有现有的更容易 css 网站。 我希望这能帮助别人。
    2021-03-21 0 0
    分享

    帅驴

    赞同来自:

    这个旁路路径为我工作......


    <td style="white-space: normal; width:300px;">


    </td>
    2021-03-21 0 0
    分享

    卫东

    赞同来自:

    铬 37.
    非固定
    table

    :


    td {
    
 width: 30px;
    
 max-width: 30px;
    
 overflow: hidden;
    
}


    前两个重要！ 否则，它正在泄漏！
    2021-03-21 0 0
    分享

    君笑尘

    赞同来自:

    放
    div

    里面
    td

    并提供以下内容
    width:50px;overflow: hidden;

    风格K. div

    http://jsfiddle.net/bh6r3L7j/
    Jsfiddle


    <td>
    
<div style="width:50px;overflow: hidden;">
    
<span>A long string more than 50px wide</span>
    
</div>
    
</td>
    2021-03-21 0 0
    分享

    小姐请别说爱

    赞同来自:

    只是划分数量 td 在 100%. 例如，你有 4 td:


    <html>
    
<table>
    
<tr>
    
<td style="width:25%">This is a text</td>
    
<td style="width:25%">This is some text, this is some text</td>
    
<td style="width:25%">This is another text, this is another text</td>
    
<td style="width:25%">This is the last text, this is the last text</td>
    
</tr>
    
</table>
    
</html>


    我们用 25% 每个 td, 最大化空间 100% 总表格
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved