css 利用table 及 noWrap 实现一列优先使用宽度，另外一列自适应

最新推荐文章于 2025-05-28 14:18:52 发布

ISaiSai

最新推荐文章于 2025-05-28 14:18:52 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/ISaiSai/article/details/45478209

CSS 专栏收录该内容

94 篇文章

订阅专栏

本文介绍了如何在网页布局中实现第一列优先使用固定宽度，第二列自适应填充剩余空间，且超过部分隐藏的设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整个容器宽度固定，

要求第一列优先使用宽度（内容长度不定），

第二列自适应，使用剩余的宽度，超出隐藏

<table style="width: 400px; overflow: hidden;">
    <tr>
        <td noWrap="noWrap">主要内容优先使用宽度</td>
        <td>
            <div style="height: 55px;overflow: hidden">
             次要内容，超出隐藏 次要内容，超出隐藏 次要内容，超出隐藏 次要内容，超出隐藏 次要内容，超出隐藏 次要内容，超出隐藏
            </div>
        </td>
    </tr>
</table>