### 回答1：
以下是一个实现固定表头并且表头
宽度可
调整的完整代码示例：
HTML代码：
```
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代码：
```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代码：
```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部分：
```
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部分：
```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部分：
```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实现表头固定，并且表头
宽度可
调整的完整代码：
```
html
<!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>
```
以上代码实现了一个具有固定表头和可
调整宽度的表格。表格的高度会自动适应容器的最大高度，同时当表格内容过长时，可以通过滚动来查看所有内容。通过在表头的列之间
拖动分隔线，可以
调整每列的
宽度。
colResizable是一款免费的jQuery插件，能为HTML表格添加拖动调整列宽的功能。兼容鼠标和触摸设备，支持页面刷新后布局保持及百分比和像素布局。用法简单，只需引入colResizable.min.js文件并应用colResizable()方法。插件还提供了多种配置选项，如resizeMode、disable等，以满足不同需求。
最低0.47元/天 解锁文章
2002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
