创建一个随身体溢出滚动的粘性表头

时间：2017-10-03 21:59:32

标签： javascript jquery html css

我将表格标题固定在页面顶部。 我需要tabled标题水平滚动主体内容。

有没有办法堆叠或组合CSS线来实现这一目标？ 有没有办法在使用position：fixed？

之后在元素上保留继承的css

请检查示例代码。 

table#live {
  max-width: 995px;
  min-width: 995px;
}

table {
  width: 100%;
  margin: 10px 0 25px;
}

.custom {
  overflow-x: scroll;
  width: 100%;
  " 

}

thead.fixedheader {
  position: fixed;
  top: 0;
  background-color: grey;
}
<div class="custom">
  <table id="live">

    <thead class="fixedheader">
      <tr>
        <th>hddddddddddddddddddddd1</th>
        <th>hddddddddddddddddddddd2</th>
        <th>hddddddddddddddddddddd3</th>
        <th>hddddddddddddddddddddd4</th>
        <th>hddddddddddddddddddddd5</th>
        <th>hddddddddddddddddddddd6</th>
        <th>hddddddddddddddddddddd7</th>
      </tr>
    </thead>
    <tbody>

      <td class="tname">
        body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
      </td>
      <td>
        body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>
      <td>
        body3
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>
      <td>
        body4
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>
      <td>
        body5
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>
      <td>
        body6
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>
      <td>
        body7
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body1
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
        <br>body2
      </td>


    </tbody>
  </table>
</div>

1 个答案:

答案 0 :(得分：0)

您听说过position: sticky吗？ https://css-tricks.com/position-sticky-2/您可以垂直放置一个标题栏，但仍然可以使用此技术水平滚动。

以下示例。这样做的缺点是并不是所有浏览器都不完全支持，所以如果你需要IE支持http://caniuse.com/#feat=css-sticky或更老的chrome / safari，你需要某种解决方法（使用我怀疑的JavaScript） ，除非一些CSS忍者对这些浏览器有更好的想法！）。

＆＃13;
＆＃13; 
table#live {
    max-width: 995px;
    min-width: 995px;
}
    
table {
    width: 100%;
    margin: 10px 0 25px;
    
}

.custom {
     width:100%;" 
}

thead.fixedheader th {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    top: 0;
    background-color: grey;
}
＆＃13; 
<html>
<div class="custom">
<table id="live">

  <thead class="fixedheader">
    <tr>
      <th>hddddddddddddddddddddd1</th>
      <th>hddddddddddddddddddddd2</th>
      <th>hddddddddddddddddddddd3</th>
      <th>hddddddddddddddddddddd4</th>
      <th>hddddddddddddddddddddd5</th>
      <th>hddddddddddddddddddddd6</th>
      <th>hddddddddddddddddddddd7</th>
    </tr>
  </thead>
  <tbody>

    <td class="tname">
      body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
    </td>
    <td>
      body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>
    <td>
      body3
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>
    <td>
      body4
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>
    <td>
      body5
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>
    <td>
      body6
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>
    <td>
      body7
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body1
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
      <br>body2
    </td>


  </tbody>
</table>
</div>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题