小贝子编程

如何在HTML / CSS中滚动时使表头冻结/修复



我现在正在处理一个页面，我正在处理一个表格。表格工作正常，但我的表格内部有很多数据，当我向下滚动表格时，标题也会向下滚动。我想对我的表发生的是使标题固定/冻结，以便每当我滚动表格时，标题都会保留在原处。请有人帮助我。

这是我的代码： .CSS 

  #table-wrapper{
    height: 600px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border:3px solid blue;
    overflow: auto;
  }
  #data{
    font-size: 0.9em;
    width: 95%;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
  }
  #data th,td{
    text-align: center;
    border: 1px solid #bcbcbc;
    border-collapse: collapse;
    word-wrap:break-word;
  }
  tbody a:hover{
    text-decoration: none;
    color: #000000;
  }
  tbody .img-responsive{
    width: 100%;
    max-width:45px;
  }

桌子

  <div id="table-wrapper" class="table-responsive">
        <table id="data" class="table table-striped table-hover">
            <thead>
            <tr>
                    <th>LHID</th>
                    <th>LO Name</th>
                    <th>Province</th>
                    <th>Municipality</th>
                    <th>Barangay</th>
                    <th>Title Number</th>
                    <th>Lot Number</th>
                    <th>Survey Number</th>
                    <th>Area</th>
                    <th>RLBET Action</th>
                    <th>Reasons</th>
                    <th colspan="2" id="action">Action</th>
            </tr>
        </thead>
        <tbody>
            <?php
            echo $LTID->viewdetails();
            ?>
        </tbody>
    </table>
    </div>

我在这里用其他一些数据来做这件事。希望这有帮助。

tr {
width: 100%;
display: inline-table;
height:60px;
table-layout: fixed;
  
}
table{
 height:300px; 
 display: -moz-groupbox;
  width:60%;
}
tbody{
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}
thead {
  width:100%;
  display:block;
  }
<table class="table table-striped">
<thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr></thead>
<tbody>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  <tr><td>..</td><td>..</td><td>..</td></tr>
  </tbody>
</table>

为了完全避免JQuery甚至Javascript，他只使用HTML和CSS来使用它的一个版本

它使用绝对定位使其保持在顶部。

section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #050;
  width: 1650px
}
.container {
  overflow-y: auto;
  overflow-x: visible;
  height: 250px
}
table {
  border-spacing: 0;
  width: 100%
}
td+td {
  border-left: 1px solid #eee
}
td,
th {
  border-bottom: 1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px
}
th,
th:first-child div {
  border: none
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  white-space: nowrap
}
th div {
  position: absolute;
  background: 0 0;
  color: #fff;
  padding: 9px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #080
}
<section>
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>LHID
            <div>LHID</div>
          </th>
          <th>LO Name
            <div>LO Name</div>
          </th>
          <th>Province
            <div>Province</div>
          </th>
          <th>Municipality
            <div>Municipality</div>
          </th>
          <th>Barangay
            <div>Barangay</div>
          </th>
          <th>Title Number
            <div>Title Number</div>
          </th>
          <th>Lot Number
            <div>Lot Number</div>
          </th>
          <th>Survey Number
            <div>Survey Number</div>
          </th>
          <th>Area
            <div>Area</div>
          </th>
          <th>RLBET Action
            <div>RLBET Action</div>
          </th>
          <th>Reasons
            <div>Reasons</div>
          </th>
          <th>Action
            <div>Action</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
        <tr>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
          <td>Dummy Data</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium