如何压缩表格使重叠的两个表格完全显示？已尝试CSS/HTML/JS无效

以下是几种切实可行的方案，帮你把两个表格都完整显示出来：

方案1：纯CSS压缩适配（优先尝试） #

通过调整表格布局、字体和内边距快速压缩尺寸，同时保证内容可读性：

/* 给表格外层加容器，处理溢出 */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 15px; /* 两个表格之间留间距 */
}

table {
  width: 100%;
  table-layout: fixed; /* 强制列宽均分，避免内容撑爆表格 */
  font-size: 0.8em; /* 按需缩小字体，比默认小15%-20% */
  border-collapse: collapse;
}

table th, table td {
  padding: 3px 5px; /* 减少单元格内边距，节省空间 */
  word-break: break-all; /* 长文本自动换行，避免列宽过宽 */
  text-align: left;
}

使用时把每个表格放进单独的容器：

<div class="table-wrap">
  <table>
    <!-- 表格内容 -->
  </table>
</div>
<div class="table-wrap">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

方案2：调整布局结构，避免横向挤压 #

如果两个表格是横向并排导致的遮挡，直接改成纵向堆叠（上面的CSS已经适配这种布局）；如果必须横向排列，给父容器加弹性布局并强制换行：

.tables-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 表格之间的间距 */
  width: 100%;
}

.tables-container .table-wrap {
  flex: 1 1 400px; /* 最小宽度400px，空间足够时自动均分 */
}

这样屏幕较小时表格会自动换行，不会互相遮挡。

方案3：JS动态缩放（针对动态内容场景） #

如果表格内容是动态生成的，用JS实时计算容器宽度，自动调整表格尺寸：

function adjustTableSizes() {
  const container = document.querySelector('.tables-container');
  if (!container) return;
  
  const containerWidth = container.offsetWidth;
  const tableCount = container.querySelectorAll('.table-wrap').length;
  // 每个表格分配的宽度，预留间距
  const tableWidth = (containerWidth / tableCount) - 10;
  
  container.querySelectorAll('table').forEach(table => {
    table.style.width = `${tableWidth}px`;
    table.style.tableLayout = 'fixed';
  });
}

// 页面加载和窗口 resize 时执行
window.addEventListener('load', adjustTableSizes);
window.addEventListener('resize', adjustTableSizes);

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