垂直滚动不适用于表格

时间：2018-07-17 06:02:34

标签： javascript jquery html css bootstrap-4

设计表格，并尝试为有限的5个数据制作垂直滚动条。已经在css中声明了滚动，但是它不起作用。试图使固定的头表和tbody滚动。当在表中添加更多行时，tbody（td）应该滚动。由于要调整每行数据，因此使用了以％为单位的宽度，并尝试了以下代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
      <!-- Theme CSS -->
      <link href="css/style.css" rel="stylesheet" ">
      <!-- Favicon -->
      <link rel="shortcut icon " href="img/favicon.ico ">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
      <script
         src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
      <style type="text/css ">
         table{
         width: 800px;
         position: relative;
         }
         thead { 
         display: block;   
         overflow-y: auto;
         height: 30px;
         max-width: 100%;
         top: 0;
         font-size: 12px;
         }
         tbody {
         max-width: 100%;
         position: absolute;
         top: 40px;
         height: 2em;
         overflow-y:scroll;
         display:block;
         font-size: 10px;
         }
         table.scroll {
         width: 100%; /* Optional */
         /* border-collapse: collapse; */
         border-spacing: 0;
         border: 2px solid black;
         }
         table.scroll tbody,
         table.scroll thead { display: block; }
      </style>
   </head>
   <div class="container ">
      <table class="scroll table table-bordered  ">
         <thead>
            <tr>
               <th style="width: 2.5%;font-size: 12px; ">Sl No</th>
               <th style="width: 3%;font-size: 12px; ">First Name</th>
               <th style="width: 10%;font-size: 12px; ">Middle Name</th>
               <th style="width: 10%;font-size: 12px; ">Last Name</th>
               <th style="width: 10%;font-size: 12px; ">Email</th>
               <th style="width: 10%;font-size: 12px; ">Department</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td style="font-size: 11px; ">1</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">12</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">3</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">4</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">5</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">6</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">7</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">8</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
            <tr>
               <td style="font-size: 11px; ">9</td>
               <td style="font-size: 11px; ">User</td>
               <td style="font-size: 11px; ">Name</td>
               <td style="font-size: 11px;">Unknown</td>
               <td style="font-size: 11px; ">username@gmail.com</td>
               <td style="font-size: 11px; ">IT Development</td>
            </tr>
         </tbody>
      </table>
   </div>
   </body>
</html>

2 个答案:

答案 0 :(得分：0)

尝试使用以下代码，这将在代码中引入垂直滚动

.scroll {
  height: 100px;
  overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- Theme CSS -->
  <link href="css/style.css" rel="stylesheet">
  <!-- Favicon -->
  <link rel="shortcut icon " href="img/favicon.ico ">
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
  <style type="text/css ">
    table {
      width: 800px;
      position: relative;
    }
    
    thead {
      display: block;
      overflow-y: auto;
      height: 30px;
      max-width: 100%;
      top: 0;
      font-size: 12px;
    }
    
    tbody {
      max-width: 100%;
      position: absolute;
      top: 40px;
      height: 2em;
      overflow-y: scroll;
      display: block;
      font-size: 10px;
    }
    
    table {
      width: 100%;
      /* Optional */
      /* border-collapse: collapse; */
      border-spacing: 0;
      border: 2px solid black;
    }
    
    table tbody,
    table thead {
      display: block;
    }
  </style>
</head>
<div class="container ">
  <div class="scroll">
    <table class=" table table-bordered  ">
      <thead>
        <tr>
          <th style="width: 2.5%;font-size: 12px; ">Sl No</th>
          <th style="width: 3%;font-size: 12px; ">First Name</th>
          <th style="width: 10%;font-size: 12px; ">Middle Name</th>
          <th style="width: 10%;font-size: 12px; ">Last Name</th>
          <th style="width: 10%;font-size: 12px; ">Email</th>
          <th style="width: 10%;font-size: 12px; ">Department</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="font-size: 11px; ">1</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">12</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">3</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">4</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">5</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">6</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">7</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">8</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
        <tr>
          <td style="font-size: 11px; ">9</td>
          <td style="font-size: 11px; ">User</td>
          <td style="font-size: 11px; ">Name</td>
          <td style="font-size: 11px;">Unknown</td>
          <td style="font-size: 11px; ">username@gmail.com</td>
          <td style="font-size: 11px; ">IT Development</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</body>

</html>

答案 1 :(得分：0)

基本上，我认为您需要两个表，例如this。

 <!-- table for header -->
 <table class="table table-bordered mb-0">
   <thead>
     ~
   </thead>
 </table>

 <!-- div for scroll -->
 <div class="scroll-area">
   <!-- table for data -->
   <table class="table table-bordered">
     <tbody>
       ~
     </tbody>
   </table>
 </div>

我喜欢这种方式，因为它非常灵活。 但是，如果要显示滚动条（我是说，取滚动条的宽度），这种方式可能不好。

如果布局简单，则可以使用position: sticky。

  position: sticky;
  top:0;

希望他们能为您提供帮助。

相关问题
最新问题