我有一个引导布局，有两个主列，一个左侧边栏和一个更宽的右侧列，里面有一个表格，当我水平调整页面大小时，我有两个水平滚动条，一个用于页面，一个用于表格（它有很多列），有没有办法让一个水平滚动条同时适用于页面和表格而不是两个？
我试图在 container-fluid div 中添加 style="overflow-x: hidden" 但没有效果，我在 container 中放置了一个 min-width 因为我希望边栏总是在左侧。
我使用了 Bootstrap 5.0.2
这是我的代码：
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
min-height: -webkit-fill-available;
min-height: 100vh;
}
html {
height: -webkit-fill-available;
}
.sidebar-left {
min-width: 230px;
min-height: 100vh;
background-color: #4e23cd;
}
.bg-right-side {
background-color: #c3c3ff;
}
.right-main {
min-height: 100vh;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>Docs</title>
</head>
<body>
<div class="container-fluid" style="min-width: 1396px">
<div class="row">
<!-- sidebar-left -->
<div class="col-2 sidebar-left p-3">
<div>
<img src="https://cdn.vectorstock.com/i/1000x1000/60/37/flower-pot-and-plant-logo-vector-20986037.webp" alt="logo" width="150" class="mx-auto d-block">
</div>
<hr class="bg-right-side">
<div class="p-2 mx-auto text-center">
<form method="POST" action="/myController/list" style="display:inline-block;">
<label style="display:none" for="idCategoria-1"></label>
<input style="display:none" type="text" id="idCategoria-1" name="idCategoria" value="1">
<button type="submit" title="List docs" class="btn btn-primary btn-lg">Button 1</button>
</form>
</div>
<div class="p-2 mx-auto text-center">
<form method="POST" action="/myController/list" style="display:inline-block;">
<label style="display:none" for="idCategoria-2"></label>
<input style="display:none" type="text" id="idCategoria-2" name="idCategoria" value="2">
<button type="submit" title="List docs" class="btn btn-primary btn-lg">Button 2</button>
</form>
</div>
<div class="p-2 mx-auto text-center">
<form method="POST" action="/myController/list" style="display:inline-block;">
<label style="display:none" for="idCategoria-2"></label>
<input style="display:none" type="text" id="idCategoria-2" name="idCategoria" value="2">
<button type="submit" title="List docs" class="btn btn-success btn-lg">Button 3</button>
</form>
</div>
</div>
<div class="col-10 p-3 right-main bg-right-side">
<div class=" ps-0 pe-0">
<!-- navbar -->
<div class="row border-bottom">
<nav class="navbar navbar-static-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a href="/"> <img src="https://cdn.vectorstock.com/i/1000x1000/60/37/flower-pot-and-plant-logo-vector-20986037.webp" alt="logo" height="150" width="250"> </a>
</div>
<ul id="navbar-user-login" class="nav navbar-top-links navbar-right">
<li class="pe-2">
<span class="pe-2 text-muted"> <b>Hi Name</b>
</span>
<div id="ruolo-selected" style="display:none">400</div>
<form method="GET" action="/myController/changeRole" style="display:inline-block;">
<select id="ruoli-select" name="ruolo" class="form-select" aria-label="role select" onchange="this.form.submit()">
<option value="400" selected="selected">Role </option>
</select>
</form>
</li>
<li>
<form method="POST" action="/myController/logout">
<button type="submit" class="btn btn-link p-0"><i class="bi bi-box-arrow-right"></i> Logout</button>
</form>
</li>
</ul>
</nav>
<div>
<hr class="bg-right-side mt-0">
</div>
</div>
<div class="row">
<div class="col-4 mt-5 mx-auto"> <h1>Document list
</h1>
</div>
</div>
<div class="row">
<div class="col-1 pe-1"><h3 class="align-middle">Year:</h3></div>
<div id="anno-selected" style="display:none">2023</div>
<div class="col-2 ps-1">
<form method="GET" action="/myController/year">
<select id="anni-select" name="anno" class="form-select" aria-label="anni select" onchange="this.form.submit()">
<option value="2022">2022 </option>
<option value="2023" selected="selected">2023 </option>
</select>
</form>
</div>
</div>
<div class="mt-2 table-responsive" style="max-height: 900px;">
<table class=" table table-success table-striped">
<thead>
<tr>
<th scope="col" style="min-width: 400px; width: 400px;">Cell</th>
<th class="col-myColumn" scope="col" style="width: 390px; min-width: 390px;">Cell</th>
<th class="col-myColumn" scope="col" style="width: 180px; min-width: 180px;">Cell</th>
<th class="col-myColumn" scope="col" style="width: 130px; min-width: 130px;">Cell</th>
<th class="col-myColumn" scope="col" style="width: 105px; min-width: 105px;">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
<th scope="col" style="min-width: 135px">Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td>
<form method="POST" action="/myController/modifify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td class="col-myClass">Cell</td>
<td>
<form method="POST" action="/myController/modifify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
<form method="POST" action="/myController/modify" style="display:inline-block;">
<button type="submit" class="btn p-0 border-0" title="Modify"><i class="bi bi-pencil-square" style="font-size: 1.6rem; color:#C61717"></i></button>
</form>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>