,可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div class="table-container">
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
</div>
CSS:
.table-container {
overflow: auto;
height: 300px; /* 设置表格容器的高度,使其可以滚动 */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #ccc;
}
thead {
background-color: #f9f9f9;
}
JavaScript:
window.addEventListener('DOMContentLoaded', function() {
var tableContainer = document.querySelector('.table-container');
var tableHead = document.querySelector('thead');
// 计算表头的位置
function fixTableHead() {
var rect = tableContainer.getBoundingClientRect();
var top = rect.top;
var left = rect.left;
tableHead.style.position = 'fixed';
tableHead.style.top = top + 'px';
tableHead.style.left = left + 'px';
tableHead.style.width = tableContainer.offsetWidth + 'px';
}
// 监听滚动事件,更新表头的位置
tableContainer.addEventListener('scroll', function() {
fixTableHead();
});
// 初始化时固定表头
fixTableHead();
});
这样,在IE11中,表格的表头将会在滚动时固定在页面顶部,同时保持宽度不变。
领取专属 10元无门槛券
手把手带您无忧上云