实现HTML表格按需扩展及容器滚动：解决宽度受限问题

针对你遇到的表格宽度受窗口限制、无法获取真实内容宽度的问题，我提供一套CSS调整+改进版jQuery逻辑的方案，完全符合你的约束条件（仅用CSS和jQuery，无额外库）：

第一步：调整CSS基础样式 #

首先修改现有CSS，让表格能根据内容自由扩展宽度，同时容器支持滚动：

.divResultTable { 
  overflow: hidden; 
  text-align: center; 
  width: 100%; 
  margin: 20px 0 0 0; 
}
.divResultTable span { 
  font-size: 18px; 
  display: contents; 
}
/* 关键修改：把width改为min-width，允许容器被表格撑开 */
.divResultTable .divOuterTableContainer { 
  min-width: 100%; 
  max-height: 300px; 
  overflow: auto; 
  display: inline-block; 
}
/* 关键修改：table-layout改为auto，让列宽根据内容自动计算 */
.divResultTable .divOuterTableContainer table { 
  position: relative; 
  border-collapse: collapse; 
  table-layout: auto; 
  top: 0; 
}
.divResultTable .divOuterTableContainer table tr { 
  border-collapse: collapse; 
}
/* 新增支持<th>的max-width，同时添加nowrap保证宽度计算准确 */
.divResultTable .divOuterTableContainer table thead tr th { 
  border-collapse: collapse; 
  padding: 0px 5px; 
  position: sticky; 
  top: -1px; 
  background-color: #B0B0B0; 
  max-width: 200px; /* 可根据需求调整这个值 */
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; /* 可选：内容超出max-width时显示省略号 */
}
.divResultTable .divOuterTableContainer table tbody tr td { 
  border: 1px solid black; 
  border-collapse: collapse; 
  padding: 0px 5px; 
  font-size: 12px; 
  text-align: left; 
  white-space: nowrap; /* 和<th>保持一致，避免列宽错乱 */
}
.divResultTable .divOuterTableContainer table tbody tr:nth-child(2n+2) { 
  background-color: #E0E0E0; 
}

第二步：改进jQuery宽度获取逻辑 #

原来用position: fixed的问题在于，fixed定位是相对于视口的，表格最大宽度被窗口限制，无法获取内容真实需要的宽度。我们换用临时克隆表格到视口外的隐藏容器的方式来获取准确宽度：

// 在.success回调中执行以下逻辑
const $targetTable = $("#queryTabBody .divResultTable table").last();

// 创建临时隐藏容器，完全脱离页面布局
const $tempContainer = $("<div>").css({
  position: "absolute",
  left: "-9999px", // 把容器放到视口左侧外，不影响页面显示
  top: "0",
  visibility: "hidden"
}).appendTo("body");

// 克隆目标表格到临时容器，此时表格可以自由扩展到真实宽度
const $cloneTable = $targetTable.clone().appendTo($tempContainer);

// 获取克隆表格的总宽度和每列的宽度
const tableWidth = $cloneTable.width();
const widths: number[] = [];
$cloneTable.find("th").each(function(index) {
  widths[index] = $(this).width();
});

// 将获取到的宽度应用到原表格
$targetTable.find("th").each(function(index) {
  $(this).width(widths[index]);
});
$targetTable.width(tableWidth);

// 清理临时元素，避免内存占用
$tempContainer.remove();

方案说明 #

1. 容器自适应宽度：把.divOuterTableContainer的width:100%改为min-width:100%，确保容器在表格宽度超过父容器时能被撑开，同时因为设置了overflow:auto，超出部分会显示滚动条。
2. 表格真实宽度获取：临时克隆表格到视口外的绝对定位容器，表格不受视口和原容器限制，能完全根据内容展开，这样获取的宽度是真实的内容宽度。
3. 表头固定与列宽控制：保留position: sticky实现表头固定，同时给添加max-width属性，配合white-space: nowrap和text-overflow: ellipsis实现列宽限制效果。

这样就能完全满足你的需求：表格可自由扩展至所需宽度，容器作为视窗，超出时显示滚动条，同时支持设置max-width。

内容的提问来源于stack exchange，提问作者Monset