如何用CSS确保表格单元格内元素不溢出，实现动态扩容？

问题根源 #

溢出问题主要来自两个核心原因：

• 单元格设置了固定的height="200px"，直接限制了垂直方向的自动扩容
• 内部使用position: absolute的元素脱离了文档流，单元格无法感知到这类元素的尺寸，自然不会跟着调整大小

具体修复步骤 #

1. 移除单元格固定高度
   删掉目标<td>标签里的height="200px"属性，让单元格能根据内部内容的高度自动拉伸。

2. 重构绝对定位元素的布局
   把脱离文档流的绝对定位容器改为文档流内的布局方式，比如保留Flex属性但去掉绝对定位：

   • 移除position: absolute、top:113px、left:100%这些会让元素跑到单元格外部的设置
   • 保留display: flex、flex-direction: column、gap: 8rem，让容器作为正常文档流的一部分存在

3. 优化表格列宽设置
   如果不需要强制固定列宽，可以删掉<td>的width属性；若必须保留部分列宽，确保表格使用默认的table-layout: auto（无需额外设置），让表格能根据内容自动调整列宽。

修改后的代码示例 #

HTML关键修改部分

<tr>
    <td>Base pan loading and Damper fixing</td>
    <!-- 移除固定height，去掉inline的position: relative -->
    <td style="width: 350px;">
      <div class="main">
        <div class="lame">
          <div class="circle">1</div>
        </div>
        <!-- 重构布局，去掉绝对定位 -->
        <div style="display: flex; flex-direction: column; gap: 8rem;">
          <div class="container">
            <div class="h2"></div>
            <div class="v4"></div>
            <div class="triangle-text2">Damper, Compressor</div>
            <div class="triangle-down2" data-content="3"></div>
          </div>
        </div>
      </div>
    </td>
    <!-- 其他td内容保留，可按需移除固定width -->
    <td>Hand gloves Safety Shoe Ear Plugs</td>
    <td></td>
    <td width="200px">
      <ol style="padding-left: 20px">
        <li>Check base pan paint pill off</li>
        <li>Check base pan paint pill off</li>
        <li>Check base pan paint pill off</li>
      </ol>
    </td>
    <td width="60px" style="text-align: center">Visual</td>
    <td width="50px" style="text-align: center">All</td>
    <td width="50px" style="text-align: center">Assembly Worker</td>
    <td width="90px" style="text-align: center">
      Problem occurs, Inform to Supervisor and f/up
    </td>
  </tr>

补充CSS规范样式

/* 确保单元格内容不被裁剪，支持自动扩容 */
td {
  overflow: visible;
  white-space: normal; /* 允许文本自动换行 */
}

/* 优化main容器内部布局 */
.main {
  display: flex;
  gap: 1rem; /* 调整内部元素间距 */
  flex-wrap: wrap; /* 内容过多时自动换行 */
}

额外提示 #

• 除非明确需要固定尺寸，否则不要给单元格设置固定宽高
• 绝对定位仅用于悬浮提示、图标叠加等特殊场景，不要用它做主要内容布局
• 优先使用Flex/Grid布局实现内容排列，这类布局会让父容器（单元格）感知到子元素尺寸，从而自动适配扩容

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