bootstrap 表头不动,表身tbody带滚动条的表格

集电极

已于 2022-09-04 11:00:18 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： bootstrap 前端 html

于 2022-09-04 10:54:47 首次发布

本文链接：https://blog.csdn.net/qq_38463737/article/details/126686783

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

bootstrap 表头不动,表身tbody带滚动条的表格

通过在tbody 使用样式 display: block; height: 100px; overflow-y: scroll; 创建滚动条。
height 是表身的高度，也是滚动条的高度。根据需要改变高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container" style="margin-top: 100px;">
        <div class="row"
            style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 5px 30px 5px 30px; margin: 5px;">
            <!-- 头部 -->
            <div class="row" style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
                <div class="col-sm-4">
                    <p style="margin-top: 5px;"><b>带滚动条表格</b></p>
                </div>
                <div class="col-sm-8">
                    <button type="button" class="btn btn-sm btn-danger" style="margin-top: 3px; float: right;"
                        title="">按钮</button>
                </div>
            </div>

            <!-- 一个表格比较重要的有 table tbody 的id属性，需要唯一 -->
            <div class="row" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px;">
                <table id="test_table" class="table table-hover">

                    <thead style="display: table; width: calc(100% - 1em);">
                        <tr style="display: table;width: 100%;">
                            <th scope="col" style="width: 60%;">列1</th>
                            <th scope="col" style="width: 20%;">列2</th>
                            <th scope="col" style="width: 20%;">列3</th>
                        </tr>
                    </thead>
                    <!-- 重要：tbody 的style样式是固定高度，使用滚动条。 td的百分比要和上面表头一致 -->
                    <tbody id="test_tbody" style="display: block; height: 100px; overflow-y: scroll;">
                        <!-- 测试表格行 -->
                        <tr style="display: table;width: 100%;">
                            <td class="td1" style="width:60%;"><input type="text" value="字符串" class="form-control"></td>
                            <td class="td2" style="width: 20%;"><button class="btn btn-sm btn-primary">按钮1</button></td>
                            <td class="td3" style="width: 20%;"><button class="btn btn-sm btn-danger">按钮2</button></td>
                        </tr>
                        <tr style="display: table;width: 100%;">
                            <td class="td1" style="width:60%;"><input type="text" value="字符串" class="form-control"></td>
                            <td class="td2" style="width: 20%;"><button class="btn btn-sm btn-primary">按钮1</button></td>
                            <td class="td3" style="width: 20%;"><button class="btn btn-sm btn-danger">按钮2</button></td>
                        </tr>
                        <tr style="display: table;width: 100%;">
                            <td class="td1" style="width:60%;"><input type="text" value="字符串" class="form-control"></td>
                            <td class="td2" style="width: 20%;"><button class="btn btn-sm btn-primary">按钮1</button></td>
                            <td class="td3" style="width: 20%;"><button class="btn btn-sm btn-danger">按钮2</button></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

集电极

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 表头不动,表身tbody带滚动条的表格

bootstrap 表头不动的带滚动条的表格> 通过在tbody 使用样式 `display: block; height: 100px; overflow-y: scroll;` 创建滚动条。> height 是表身的高度，也是滚动条的高度。根据需要改变高度。>
复制链接

扫一扫