Question

我有一个严重的问题无法解决，希望您能帮助我。因此，我有一个在垂直滚动时固定标题的表（下面是CSS和Javascript），但是在水平滚动时标题没有移动。

    window.onscroll = function() {myFunction()};
                var header = document.getElementById('myHeader');
                var sticky = header.offsetTop;
                function myFunction() {
                    if (window.pageYOffset > sticky) {
                        header.classList.add('sticky');
                    } else {
                        header.classList.remove('sticky');
                    }
                }

    .sticky {
                  position: fixed;
                  top: 0;
                  z-index:1000;
                  padding-left:62px;
                  overflow-x: scroll;
                }

    
    <table id='table' class='display cell-border'>  
                    <thead class='head' id='myHeader'>
                        <tr>
                            <th class='noSearch'></th>
                            <th class='noSearch'></th>
                            <th>Shell ID</th>
                            <th>Package ID</th>
                            <th>Package Title</th>
                            <th>Product Type</th>
                            <th>Project</th>
                            <th>Current Phase</th>
                            <th>Status</th>
                        </tr>
</thead>
    <tr>
    <td>Shell ID</td>
                            <td>Package ID</td>
                            <td>Package Title</td>
                            <td>Product Type</td>
                            <td>Project</td>
                            <td>Current Phase</td>
                            <td>Status</td>
                    </tr>
          </table>

希望您能帮助我。干杯

Answer 1

尝试此方法：https://codepen.io/anon/pen/vVGeVM

<!------------------------------Css-------------------->
.tableContainer{
  overflow: auto;
  height:100px;
}
td, th{
  width:80px;
  text-align:center;
}
<!------------------------html-------------------------->

<table id='table' class='display cell-border'>  
    <thead class='head' id='myHeader'>
            <tr>
                <th class='noSearch'></th>
                <th class='noSearch'></th>
                <th>Shell ID</th>
                <th>Package ID</th>
                <th>Package Title</th>
                <th>Product Type</th>
                <th>Project</th>
                <th>Current Phase</th>
                <th>Status</th>
             <tr>
 </thead>
 <tbody>
   <tr>
    <td colspan="12">
      <div class="tableContainer">
        <table>
          <tr>
            <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
          </tr>
        </table>
      </div>
     </td>
   </tr>
 </tbody>
</table>

Answer 2

请使用固定的标题数据表，它将解决您的问题。 https://datatables.net/extensions/fixedheader/examples/options/simple.html

Answer 3

根据您的问题，看来您不应该使用window.onScroll事件在CSS上留下此行为。它可以处理它。

   .sticky {
          position: fixed;
          top: 0;
          z-index:100;
        }

并将此属性放在标头父元素中

 #table{
 overflow: auto; 
}

表固定标题：水平滚动时应移动

3 个答案: