Fatal编程技术网
  • javascript/
  • Javascript 当包含超过10列时，引导表响应问题

Javascript 当包含超过10列时，引导表响应问题

javascript html css

Javascript 当包含超过10列时，引导表响应问题,javascript,html,css,Javascript,Html,Css,说明 响应表只能在侧栏打开的情况下显示10列，如果超过10列，则该表在我的屏幕上的宽度将超过100%（1366x768）。然而，当侧边栏关闭时，响应表可以正常工作。请帮帮我，我真的不知道怎么了：( 问题数字 图1（） 图2（） 图3（） index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewp

说明

响应表只能在侧栏打开的情况下显示10列，如果超过10列，则该表在我的屏幕上的宽度将超过100%（1366x768）。然而，当侧边栏关闭时，响应表可以正常工作。请帮帮我，我真的不知道怎么了：(

问题数字

图1（）

图2（）

图3（）

index.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
.table td、.table th{padding:0！important；}

我在页面内容包装器上添加了
overflow-x:hidden；
，现在它可以工作了

这可以工作12列，但当我再添加2列时，表格的宽度就比滚动条大了（我认为表格会有滚动条），Image（）好的，我刚刚发现了问题。我在页面内容包装器上添加了
overflow-x:hidden；
，现在它可以工作了。您可以添加overflow:auto； 
: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%;
}