Я хочу создать в PHP / Bootstrap таблицу с полосой прокрутки. Я хотел бы, чтобы моя таблица содержала 2 видимые строки, а остальные - с помощью полосы прокрутки. Вот рабочий пример: https://codepen.io/yavuzselim/pen/LNYrBd Кто-то может исправить мой код? Я не знаю, в чем проблема, потому что я поместил необходимые атрибуты CSS в tbody.
Вот рендеринг страницы:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
<a href="test.php" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Button</a>
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:50px;overflow-y:scroll;">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>