js实现表头固定,并且表头宽度可调整的完整代码

### 回答1：
以下是一个实现固定表头并且表头宽度可调整的完整代码示例：

HTML代码：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th style="width: 100px;">Header 1</th>
        <th style="width: 150px;">Header 2</th>
        <th style="width: 200px;">Header 3</th>
        <th style="width: 250px;">Header 4</th>
        <th style="width: 300px;">Header 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
        <td>Row 1 Column 4</td>
        <td>Row 1 Column 5</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
        <td>Row 2 Column 4</td>
        <td>Row 2 Column 5</td>
      </tr>
      <tr>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
        <td>Row 3 Column 3</td>
        <td>Row 3 Column 4</td>
        <td>Row 3 Column 5</td>
      </tr>
      <tr>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
        <td>Row 4 Column 3</td>
        <td>Row 4 Column 4</td>
        <td>Row 4 Column 5</td>
      </tr>
      <tr>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
        <td>Row 5 Column 3</td>
        <td>Row 5 Column 4</td>
        <td>Row 5 Column 5</td>
      </tr>
      <tr>
        <td>Row 6 Column 1</td>
        <td>Row 6 Column 2</td>
        <td>Row 6 Column 3</td>
        <td>Row 6 Column 4</td>
        <td>Row 6 Column 5</td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码：

.table-container {
  position: relative;
  max-width: 100%;
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

thead th, tbody td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
}

JavaScript代码：

const table = document.querySelector('table');
const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
const ths = thead.querySelectorAll('th');

const resizeHandler = (e) => {
  const th = e.target.parentNode;
  const index = Array.from(ths).indexOf(th);
  const cells = table.querySelectorAll(`tr > *:nth-child(${index + 1})`);
  const rect = th.getBoundingClientRect();
  const startX = e.pageX;
  const minWidth = parseInt(window.getComputedStyle(th).minWidth) || 20;

  const mousemoveHandler = (e) => {
    const dx = e.pageX - startX;
    const width = rect.width + dx;
    if (width > minWidth) {
      th.style.width = `${width}px`;
      for (const cell of cells) {
        cell.style.width = `${width}px`;
      }
    }
  };

  const mouseupHandler = () => {
    document.removeEventListener('mousemove', mousemoveHandler);
    document.removeEventListener('mouseup', mouseupHandler);
  };

  document.addEventListener('mousemove', mousemoveHandler);
  document.addEventListener('mouseup', mouseupHandler);
};

for (const th of ths) {
  const resizeHandle = document.createElement('div');
  resizeHandle.classList.add('resize-handle');
  th.appendChild(resizeHandle);
  th.addEventListener('mousedown', resizeHandler);
}

这个代码实现了以下功能：

1. 表头固定在页面顶部，当用户向下滚动时，表头仍然可见。
2. 表头宽度可调整，用户可以通过拖动表头右侧的调整器来调整列宽。
3. 当用户调整列宽时，表格中的所有单元格宽度也会相应地调整。

请注意，这个代码示例仅限于固定单个表格的表头。如果您需要在页面上同时固定多个表格的表头，或者需要其他复杂的功能，您可能需要使用更全面的解决方案，如jQuery插件等。

### 回答2：
实现表头固定并且表头宽度可调整的完整代码需要使用到JavaScript和CSS。

以下是一个简单的实现示例：

HTML部分：

<div class="table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th style="width: 200px;">列1</th>
        <th style="width: 200px;">列2</th>
        <th style="width: 200px;">列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
      </tr>
      <!-- 其他行数据 -->
    </tbody>
  </table>
</div>

CSS部分：

.table-container {
  overflow: auto;
  height: 300px;
}

#my-table th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

#my-table td,
#my-table th {
  padding: 10px;
  border: 1px solid #ccc;
}

JavaScript部分：

window.addEventListener('DOMContentLoaded', function() {
  var tableContainer = document.querySelector('.table-container');
  var table = document.getElementById('my-table');

  tableContainer.addEventListener('scroll', function() {
    var translate = 'translate(0,' + this.scrollTop + 'px)';
    table.querySelector('thead').style.transform = translate;
  });

  var resizeTh = null;
  var startX = 0;
  var startWidth = 0;

  function initResize(element) {
    element.addEventListener('mousedown', function(e) {
      resizeTh = this;
      startX = e.pageX;
      startWidth = parseInt(
        window.getComputedStyle(resizeTh).getPropertyValue('width')
      );
    });

    document.addEventListener('mousemove', function(e) {
      if (resizeTh) {
        var width = startWidth + (e.pageX - startX);
        resizeTh.style.width = width + 'px';
      }
    });

    document.addEventListener('mouseup', function() {
      resizeTh = null;
    });
  }

  var headers = table.querySelectorAll('th');
  headers.forEach(function(header) {
    initResize(header);
  });
});

以上代码实现了表头固定和表头宽度可调整的功能。表格内容超出容器高度时，容器将出现滚动条，而表头将保持固定可见。你还可以通过拖动表头分隔符来调整各列的宽度。注意，需要在容器的CSS样式中设置固定的高度。

### 回答3：
以下是使用JavaScript实现表头固定，并且表头宽度可调整的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>表头固定</title>
    <style>
        .table-container {
            overflow: auto;
            max-height: 300px;
        }
        .table-header {
            position: sticky;
            top: 0;
            background-color: #f9f9f9;
        }
        .table-header th {
            padding: 10px;
        }
        .table-content td {
            padding: 10px;
        }
        .resize-handle {
            position: absolute;
            top: 0;
            right: -5px;
            bottom: 0;
            width: 10px;
            cursor: col-resize;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead class="table-header">
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                </tr>
            </thead>
            <tbody class="table-content">
                <tr>
                    <td>行1, 列1</td>
                    <td>行1, 列2</td>
                    <td>行1, 列3</td>
                </tr>
                <tr>
                    <td>行2, 列1</td>
                    <td>行2, 列2</td>
                    <td>行2, 列3</td>
                </tr>
                <!-- 可以添加更多的数据行 -->
            </tbody>
        </table>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tableContainer = document.querySelector('.table-container');
            var tableHeader = document.querySelector('.table-header');
            var resizeHandle = document.createElement('div');
            var isResizing = false;
            var prevX = 0;
            var currentTh = null;

            resizeHandle.className = 'resize-handle';
            tableHeader.appendChild(resizeHandle);
            resizeHandle.style.display = 'none';

            // 监听窗口滚动事件
            tableContainer.addEventListener('scroll', function() {
                tableHeader.style.transform = 'translate(0px,' + this.scrollTop + 'px)';
            });

            // 监听鼠标按下事件
            resizeHandle.addEventListener('mousedown', function(e) {
                isResizing = true;
                prevX = e.clientX;
                currentTh = e.target.previousElementSibling;
            });

            // 监听鼠标移动事件
            document.addEventListener('mousemove', function(e) {
                if (isResizing) {
                    var dx = e.clientX - prevX;
                    var newWidth = currentTh.offsetWidth + dx;
                    currentTh.style.width = newWidth + 'px';
                    prevX = e.clientX;
                }
            });

            // 监听鼠标放开事件
            document.addEventListener('mouseup', function() {
                isResizing = false;
            });

            // 监听窗口调整事件
            window.addEventListener('resize', function() {
                tableContainer.style.width = tableHeader.offsetWidth + 'px';
            });

            tableContainer.style.width = tableHeader.offsetWidth + 'px';
        });
    </script>
</body>
</html>

以上代码实现了一个具有固定表头和可调整宽度的表格。表格的高度会自动适应容器的最大高度，同时当表格内容过长时，可以通过滚动来查看所有内容。通过在表头的列之间拖动分隔线，可以调整每列的宽度。