Bootstrap table 具有未正确生成的可滚动属性

Question

我想在 PHP/Bootstrap 中生成一个带有滚动条的 table。我希望我的 table 包含 2 行可见，其余行使用滚动条可见。这是一个工作示例：https://codepen.io/yavuzselim/pen/LNYrBd 有人可以修复我的代码吗？我不知道问题出在哪里，因为我在 tbody.

中放置了必要的 CSS 属性

页面效果图如下：

<!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>

Answer 1

我会更改 tbody 中的高度，74px 而不是 200px。 Table with new height

  tbody{
    height:74px;
    overflow-y:auto;
    width: 100%;
  }

Answer 2

将 tbody 高度更改为 74px

此外，在 table 标签上添加 "table-responsive" class。

  tbody{
    height:74px;
  }

Answer 3

解决方案：只需将属性添加到tbody即可：height:150px; width: 100%; display:block;overflow-y:auto

<!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:150px;width: 100%;display:block;overflow-y:auto">

        <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>

Bootstrap table 具有未正确生成的可滚动属性

Bootstrap table with scrollable attribute non generated correctly

html

css

scroll

overflow

scrollbar