无法为表格制作固定标题

时间：2018-07-16 05:54:45

标签： javascript jquery html css bootstrap-4

我写了一个代码来固定表头。并且使垂直滚动条，标题和表的数据大小和表的宽度应固定。我什至声明了表响应型，可以调整th和td的自动宽度。

如何在固定th且表数据大小固定的情况下进行垂直滚动？

thead th {
  height: 30px;
}

tbody {
  overflow-y: auto;
  height: 190px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <table class="table  table-bordered table-responsive">
    <thead>
      <tr>
        <th>Sl No</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Designation</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User Unkown User </td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
    </tbody>
  </table>
</div>

2 个答案:

答案 0 :(得分：0)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table</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"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         thead{position:fixed;}
         thead th {
         height: 30px;
         z-index:9999;
         background:#fff;
         }
         tbody {
         overflow:hidden;
         overflow-y: auto;
         height: 190px;

         }
      .myCustomTable .col-md-1{
          width:9%;
       }
     .myCustomTable .col-md-2{
          width:16%;
       }
     .myCustomTable .col-md-3{
          width:25%;
       }
      </style>
   </head>
   <div class="container">
	
	
	<table class="table table-bordered table-responsive myCustomTable" >
	    <thead>
	        <tr class="row">
	            <th class="col-md-1">Sl No</th>
	            <th class="col-md-2">Full Name</th>
	            <th class="col-md-3">Email</th>
	            <th class="col-md-3">Designation</th>
	            <th class="col-md-3">Department</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User</td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
			  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
			  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
			 <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
            
        </tbody>
    </table>
</div>
   </body>
</html>

答案 1 :(得分：-1)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table</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"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         table{
            width: 800px;
            position: relative;
         }
         thead {
         position: absolute;
         overflow-y: auto;
         overflow-x: hidden;
         height: 50px;
         max-width: 100%;
         top: 0;
         }
         tbody {
         max-width: 100%;
         position: absolute;
         top: 40px;
         height: 10em;
         overflow-y:scroll;
         display:block;
         }
      </style>
   </head>
   <div class="container">
	
	
	<table class="table  table-bordered table-responsive" >
	    <thead>
	        <tr>
	            <th>Sl No</th>
	            <th>Full Name</th>
	            <th>Email</th>
	            <th>Designation</th>
	            <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
			  <tr>
                <td>1</td>
                <td>Unkown User Unkown User  </td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
			  <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
			  <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr> <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>  <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
            
        </tbody>
    </table>
</div>
   </body>
</html>

相关问题
最新问题