如何在html / css中滚动时使表头冻结/修复？

时间：2016-06-02 08:02:47

标签： 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>

2 个答案:

答案 0 :(得分：1)

我在这里做了一些其他数据。希望这会有所帮助。

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>

答案 1 :(得分：0)

为了避免使用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>

相关问题
最新问题