table 头部固定_内容溢出滚动

最新推荐文章于 2024-06-28 14:18:09 发布

極鬥飛星

最新推荐文章于 2024-06-28 14:18:09 发布

阅读量740

点赞数

分类专栏： JS 文章标签： table 头部固定_内容溢出滚动 table 头部固定

本文链接：https://blog.csdn.net/my7377/article/details/83987225

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            text-align: center;
            border-collapse:collapse;
        }
        thead {
            display: table;
            width: 100%;
            table-layout: fixed;
            background: #fca;
        }
        tbody {
            height:200px;
            display: block;
            overflow-y: scroll;
            width: 100%;
            table-layout: fixed;
        }
        tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        td{
            border:1px solid #ccc;
            height: 50px;
            line-height:50px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

極鬥飛星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table 头部固定_内容溢出滚动

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; table{ text-al
复制链接

扫一扫

专栏目录