javascript - 包含超过 10 列时的引导表响应问题

问题描述

描述

响应式表格只能在侧边栏打开的情况下显示 10 列，如果超过，表格在我的屏幕上超过 100% 的宽度 (1366x768)。但是，当侧边栏关闭时，响应式表格可以正常工作。请帮助我，我真的不知道出了什么问题:(

问题图

图 1 ( https://drive.google.com/file/d/1dNzjktJ4SmhvnTbltdCbTj8_Mo-f5LFb/view?usp=sharing )

图 2 ( https://drive.google.com/file/d/1XHb8ijRPIgXzw0zbmO14QroApR98qPuI/view?usp=sharing )

图 3 ( https://drive.google.com/file/d/13UwzEBP5oYfh8laPykcbI80MDhXc8Brm/view?usp=sharing )

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Project</title>
</head>
<body>
    <div class="d-flex" id="wrapper">
        <div id="sidebar-wrapper"></div>

        <div id="page-content-wrapper">
            <nav class="navbar navbar-expand bg-darkblue">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <button class="btn" id="menu-toggle">Open Sidebar</button>
                    </li>
                    <li class="nav-item ml-2 mt-1">
                        <span class="title">Index</span>
                    </li>
                </ul>
            </nav>

            <div class="container-fluid mt-4 center">
                <form>
                    <div class="row form-group">
                        <div class="col-md-3 col-12">
                            <label for="name">Name</label>
                        </div>
                        <div class="col-md-9 col-12">
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                    </div>
                </form>

                <div class="table-wrapper">
                    <table class="table table-striped table-bordered table-responsive">
                        <thead>
                            <tr>
                                <th>1</th>
                                <th>2</th>
                                <th>3</th>
                                <th>4</th>
                                <th>5</th>
                                <th>6</th>
                                <th>7</th>
                                <th>8</th>
                                <th>9</th>
                                <th>10</th>
                                <th>11</th>
                                <th>12</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
                                <td>12. Last Field</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <script>
        $("#menu-toggle").click(function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
    </script>
</body>
</html>

样式.css

:root {
    --black: #000000;
    --white: #ffffff;
    --dark-blue: #1565c0;
    --dark-gray: #757575;
    --light-gray: #e5e5e5;
    --lighter-gray: #f6f6f6;
}

body {
    overflow-x: hidden;
}

.bg-darkblue {
    background-color: var(--dark-blue);
}

.title {
    font-size: 1.25rem;
    color: var(--white);
}

#wrapper {
    overflow-x: hidden;
    background: --var(color-white);
}

#sidebar-wrapper {
    background-color: var(--light-gray);
    width: 250px;
    height: 200vh;
    padding: 30vh 0;
    position: fixed;
    z-index: 7;
    top: 0;
    left: 0;
    transition: width .25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: auto;
}

#page-content-wrapper {
    margin-left: 250px;
    width: 100%;
    min-height: 100vh;
    transition: margin-left .25s cubic-bezier(0.4, 0, 0.2, 1);
}

#wrapper.toggled #sidebar-wrapper {
    width: 0;
}

#wrapper.toggled #page-content-wrapper {
    margin-left: 0;
}

.table-wrapper {
    width: 100%;
}

标签： javascripthtmlcss

javascript - 包含超过 10 列时的引导表响应问题

问题描述

解决方案

推荐阅读