优化功能,固定HTML表格的标题,并根据屏幕和内容的大小实时调整宽度的解决方案可以采用以下步骤:
th {
position: sticky;
top: 0;
z-index: 999;
background-color: #fff;
}
window.addEventListener('resize', function() {
adjustTableWidth();
});
function adjustTableWidth() {
var table = document.getElementById('myTable');
var container = document.getElementById('tableContainer');
var containerWidth = container.offsetWidth;
var totalWidth = 0;
// 计算表格每列的宽度总和
for (var i = 0; i < table.rows[0].cells.length; i++) {
totalWidth += table.rows[0].cells[i].offsetWidth;
}
// 判断总宽度是否超出容器宽度
if (totalWidth > containerWidth) {
// 超出容器宽度时,按比例缩小列宽度
var scale = containerWidth / totalWidth;
for (var i = 0; i < table.rows[0].cells.length; i++) {
var cell = table.rows[0].cells[i];
var width = cell.offsetWidth * scale;
cell.style.width = width + 'px';
}
} else {
// 未超出容器宽度时,恢复原始列宽度
for (var i = 0; i < table.rows[0].cells.length; i++) {
var cell = table.rows[0].cells[i];
cell.style.width = '';
}
}
}
以上代码通过监听窗口resize事件,在窗口大小改变时触发adjustTableWidth函数,动态计算表格列的宽度并作出相应调整。
关于表格固定标题和实时调整宽度的优势和应用场景,可以总结如下:
针对以上需求,腾讯云的相关产品和服务如下:
领取专属 10元无门槛券
手把手带您无忧上云