时间戳

首页 > 解决方案 > 为带有固定标题的 HTML 5 表格创建滚动条

html - 为带有固定标题的 HTML 5 表格创建滚动条

问题描述

我想在 HTML 5 中为表格创建一个滚动条，以便固定标题。

我已经为表格创建了滚动条，但是当我向下滚动时标题会移动。我已经尝试过在 css 中使用 block: fixed 命令，但是它弄乱了整个表结构。

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey; */
  border-radius: 10px;
}

标签： htmlcsshtml-table

解决方案

这将解决你的问题

.table-responsive{
  height:400px;  
  overflow:scroll;
}
 thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="table-responsive">
    <table class="table table-hover" id="job-table">
      <thead>
        <tr class="text-center">
          <th scope="col">Applicant ▼&lt;/th>
          <th scope="col">State</th>
          <th scope="col">EIN</th>
          <th scope="col">DUNS</th>
          <th scope="col">Grant Type</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      
      
      <tbody class="text-center tableBody">
      
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
           <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
      </tbody>
    </table>
  </div>

推荐阅读