bootstrap制作响应式表格

93次阅读
没有评论

要制作响应式表格,我们可以利用 Bootstrap 5 提供的响应式表格类,该类可以自动将表格设置为水平滚动并适应小屏幕设备。

以下是一个使用 Bootstrap 5 制作响应式表格的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Gutters Example</title>
    <!-- 引入 Bootstrap 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>响应式表格</h1>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Username</th>
                <th scope="col">Email</th>
                <th scope="col">Phone</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>John</td>
                <td>Doe</td>
                <td>@jdoe</td>
                <td>jdoe@example.com</td>
                <td>123-456-7890</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jane</td>
                <td>Smith</td>
                <td>@jsmith</td>
                <td>jsmith@example.com</td>
                <td>456-789-0123</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Bob</td>
                <td>Johnson</td>
                <td>@bjohnson</td>
                <td>bjohnson@example.com</td>
                <td>789-012-3456</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

在上面的代码中,我们使用了table-responsive类来创建一个响应式容器,以包含我们的表格。然后,在表格本身上,我们使用了 Bootstrap 5 提供的table类来添加表格样式。

需要注意的是,响应式表格类必须与<div>元素一起使用,而不能直接应用于<table>元素。

此外,当表格超出容器的大小时,将会出现水平滚动条,从而确保表格在小屏幕设备上可以水平滚动以便完全显示表格内容。

通过使用这些类和组件,我们可以很容易地创建具有响应式布局的表格,以确保在不同屏幕大小的设备上都可以正确显示。

正文完
 
评论(没有评论)