菜单折叠后22列HTML表格超出屏幕的问题求助

你的核心问题在于表格列宽设置混乱（多个列的百分比总和远超100%），加上nowrap强制文本不换行，当菜单折叠后页面可用宽度变窄，表格无法自适应收缩，导致部分列溢出。下面是几个实用的解决办法：

方案1：给表格添加横向滚动容器（最推荐） #

把表格包裹在一个带横向滚动的容器里，用户可以通过滚动查看所有列，不破坏原有布局：

<div style="overflow-x: auto;">
  <table width="100%" border="1" cellpadding="1" cellspacing="2" bordercolor="#999999">
    <!-- 你的表格内容保持不变 -->
  </table>
</div>

当表格宽度超过容器时，会自动出现横向滚动条，所有列都能被访问到，适配各种宽度的页面。

方案2：修正列宽并启用固定布局 #

清理混乱的列宽设置，让总宽度不超过100%，同时用CSS固定表格布局，避免内容撑开列：

<style>
  .adjusted-table {
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word; /* 允许长文本自动换行 */
  }
  .adjusted-table td {
    overflow: hidden;
    text-overflow: ellipsis; /* 超长文本显示省略号，可选 */
  }
</style>

<table class="adjusted-table" border="1" cellpadding="1" cellspacing="2" bordercolor="#999999">
  <tbody>
    <tr>
      <td height="24" width="12%">Customer</td>
      <td width="8%">Purchase</td>
      <td width="8%">Branch</td>
      <td width="8%">Status</td>
      <td width="8%">PO Issue date</td>
      <td width="8%">Delivery Date</td>
      <td width="8%">Return Date</td>
      <td width="8%">Approved By</td>
      <td width="7%">Equipment Recovery</td>
      <td width="7%">Labor Recovery</td>
      <td width="7%">Shipping Recovery</td>
      <td width="7%">Purchase Recovery</td>
      <td width="7%">Other Recovery</td>
      <td bgcolor="#E6E6E6"><strong>Total</strong></td>
      <td width="6%">Equipment Rental</td>
      <td width="6%">Labor</td>
      <td width="6%">Shipping</td>
      <td width="6%">Equipment Purchase</td>
      <td width="5%">Other</td>
      <td width="5%">Tax</td>
      <td width="5%">Loss Code</td>
      <td width="10%">Internal Notes</td>
    </tr>
    <tr>
      <td height="24" colspan="13">
          <div align="right"><strong>TOTALS</strong></div>
      </td>
      <td bgcolor="#E6E6E6">$0.00</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td colspan="2"></td>
    </tr>
  </tbody>
</table>

table-layout: fixed让表格严格按设置的列宽渲染，不会因为内容长度改变列宽；word-wrap: break-word确保长文本不会撑爆单元格。

方案3：小宽度下隐藏非关键列（可选） #

如果菜单折叠后屏幕空间极度有限，可以通过媒体查询在窄屏时隐藏非核心列，优先展示关键数据：

<style>
  /* 当屏幕宽度小于768px时生效 */
  @media (max-width: 768px) {
    .non-essential {
      display: none;
    }
  }
</style>

<table width="100%" border="1" cellpadding="1" cellspacing="2" bordercolor="#999999">
  <tbody>
    <tr>
      <td height="24" width="20%">Customer</td>
      <td width="15%">Purchase</td>
      <td width="15%" class="non-essential">Branch</td>
      <td width="15%">Status</td>
      <td width="15%" class="non-essential">PO Issue date</td>
      <td width="15%" class="non-essential">Delivery Date</td>
      <!-- 其他非关键列都加上non-essential类 -->
    </tr>
    <!-- 表格其他内容 -->
  </tbody>
</table>

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