利用tabel实现部分列宽度按固定，一列根据容器宽度自适应

最新推荐文章于 2024-01-29 01:17:19 发布

ISaiSai

最新推荐文章于 2024-01-29 01:17:19 发布

阅读量8.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ISaiSai/article/details/45244743

版权

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

最简单的方法实现部分列固定宽度，一列随着容器宽度自适应

table-layout: fixed  ，并且这是部分固定宽度列的宽度，并且td overflow：hidden，防止溢出

并且table的宽度100%

DEMO 如下：实现随着页面的宽度的变化，中间一列的宽度变化（另外三列固定）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .firstLine,.thirdLine,.forthLine
        {
            width:100px;
        }
        .secondLine
        {
        }
        .myTable
        {
            overflow:hidden;
            width:100%;
            background-color: #ccc;
            table-layout: fixed
        }
        table td
        {
            overflow: hidden;
        }
    </style>
</head>
<body>
<table class="myTable">
    <tr>
        <td class="firstLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
        <td class="secondLine">第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</td>
        <td class="thirdLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
        <td class="forthLine">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
    </tr>
    <tr>
        <td class="firstLine">第一行</td>
        <td class="secondLine">第二行</td>
        <td class="thirdLine">第三行</td>
        <td class="forthLine">第四行</td>
    </tr>
</table>
</body>
<script>
</script>
</html>

ISaiSai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用tabel实现部分列宽度按固定，一列根据容器宽度自适应

最简单的方法实现部分列固定宽度，一列随着容器宽度自适应table-layout: fixed ，并且这是部分固定宽度列的宽度，并且td overflow：hidden，防止溢出并且table的宽度100%DEMO 如下：实现随着页面的宽度的变化，中间一列的宽度变化（另外三列固定）html>html>head> meta char
复制链接

扫一扫