解决layui表格的表头不滚动的问题

解决layui表格的表头不滚动的问题，可以采用如下三种方法：

解决layui表格的表头不滚动的问题

方法一：使用“xscroll”属性

在layui表格的table标签中加入xscroll属性，将xscroll属性的值设为true即可实现表头固定，内容可滚动。

示例如下：

<table class="layui-table" lay-skin="row" lay-size="lg" xscroll="true">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>列5</th>
      <th>列6</th>
      <th>列7</th>
      <th>列8</th>
      <th>列9</th>
      <th>列10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
      <td>数据7</td>
      <td>数据8</td>
      <td>数据9</td>
      <td>数据10</td>
    </tr>
    <!-- more data -->
  </tbody>
</table>

方法二：使用CSS的固定定位

使用CSS的固定定位，将表格头部固定在页面顶部，然后给表格内容添加上margin-top:表格头部高度，实现表格内容滚动。

示例如下：

<div class="table-wrapper">
  <table class="layui-table" lay-skin="row" lay-size="lg">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
        <th>列9</th>
        <th>列10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
        <td>数据7</td>
        <td>数据8</td>
        <td>数据9</td>
        <td>数据10</td>
      </tr>
      <!-- more data -->
    </tbody>
  </table>
</div>

<style>
  .table-wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
  }
  .table-wrapper thead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .table-wrapper tbody {
    margin-top: 42px;
    overflow-y: scroll;
    width: 100%;
  }
</style>

方法三：使用JavaScript

使用JavaScript代码实现滚动的固定表头功能。

示例如下：

<div class="table-wrapper">
  <table class="layui-table" lay-skin="row" lay-size="lg" id="fixed-table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
        <th>列9</th>
        <th>列10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
        <td>数据7</td>
        <td>数据8</td>
        <td>数据9</td>
        <td>数据10</td>
      </tr>
      <!-- more data -->
    </tbody>
  </table>
</div>

<script>
  var table = document.getElementById('fixed-table');
  var wrapper = document.createElement('div');
  wrapper.className = 'table-wrapper';
  table.parentNode.insertBefore(wrapper, table);
  wrapper.appendChild(table.cloneNode(true));

  var originalHead = table.querySelector('thead');
  var clonedHead = wrapper.querySelector('thead');
  clonedHead.style.backgroundColor = '#fff';

  var originalBody = table.querySelector('tbody');
  var clonedBody = wrapper.querySelector('tbody');
  clonedBody.style.overflowY = 'scroll';
  clonedBody.style.height = '200px';
  clonedBody.addEventListener('scroll', function() {
    originalHead.style.transform = 'translateY(' + clonedBody.scrollTop + 'px)';
  });
</script>

以上是解决layui表格表头不滚动问题的三种方法，通过使用这些方法你可以实现不同样式的表格表头固定效果。