兼容IE11的固定高度表格：单元格内容自适应宽度且最多两行显示的实现问题

嘿，我之前也碰到过类似的兼容IE11的表格布局需求，咱们一步步来调整代码解决你的问题：

首先先拆解现有代码里的几个核心问题：

• table-layout: fixed 会强制单元格按预设宽度分配空间，完全没法自适应内容宽度；
• td的padding设为0，导致文本在62px高度里没有垂直居中的缓冲空间，而且span的max-height设为62px，会允许文本超出两行（3行总高72px，overflow:hidden截断后会出现上下被裁切的情况）；
• 容器的overflow: scroll写错了语法（冒号是中文的），而且用auto比scroll更合理——只有在表格真的超出容器时才显示滚动条。

针对你的需求，调整后的方案如下：

关键调整点 #

• 表格布局切换：把table-layout: fixed改成table-layout: auto，让单元格宽度自适应内容，同时保留min-width: 100%确保表格在内容较少时能占满容器宽度；
• 单元格内边距优化：给tbody的td设置上下内边距，让两行文本（48px）在62px高度里垂直居中（62-48=14，上下各7px刚好填满剩余空间）；
• 文本容器高度限制：把span的max-height设为48px（刚好是两行文本的高度：2*24px），配合overflow: hidden确保超出两行的文本直接被截断；
• 垂直对齐修正：给td加上vertical-align: middle，让文本块在单元格内垂直居中；
• 容器滚动优化：修正容器的overflow属性为overflow-x: auto，只在表格宽度超出容器时显示横向滚动条。

修改后的完整代码 #

.container { 
  width: 600px; 
  overflow-x: auto; /* 修正语法，仅在需要时显示横向滚动条 */
}
table { 
  table-layout: auto; /* 改为auto，让单元格自适应内容宽度 */
  min-width: 100%; 
  border-collapse: collapse; /* 确保边框合并，避免额外高度干扰 */
}
tr>th:first-of-type, tr>td:first-of-type { 
  min-width: 70px; 
}
table thead th { 
  border-top-color: #d9deea; 
  border-bottom-color: #6b7790; 
  border-style: solid none solid none; 
  font-weight: 700; 
  padding: 24px 12px; 
  font-size: 14px; 
  color: #6b7790; 
  line-height: 16px; 
  border-width: 1px; 
  min-width: 124px; 
}
tbody td { 
  color: #01216c; 
  line-height: 24px; 
  padding: 7px 12px; /* 上下7px内边距，让文本垂直居中，总高度7+48+7=62 */
  height: 62px; /* 固定单元格高度 */
  font-size: 14px; 
  border-width: 1px; 
  border-bottom-color: #d9deea; 
  border-style: none none solid none; 
  overflow: hidden; 
  min-width: 124px; 
  vertical-align: middle; /* 确保文本块垂直居中 */
}
td>span { 
  max-height: 48px; /* 刚好两行文本的高度（2*24） */
  display: block; 
  overflow: hidden; /* 超出两行的文本截断 */
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
      <tr>
        <td><span>Lorem ipsum.</span></td>
        <td><span>Lorem ipsum dolor sit.</span></td>
        <td><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, minus?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo beatae quidem, molestiae sequi iusto amet voluptas maiores. Accusamus, dicta culpa?</span></td>
      </tr>
    </tbody>
  </table>
</div>

调整逻辑说明 #

• table-layout: auto 让浏览器根据单元格内容自动计算宽度，既满足“宽度自适应内容”的需求，min-width:100%又保证表格在内容不足时不会收缩到小于容器宽度；
• 上下7px的padding加上48px的文本高度，刚好填满62px的单元格高度，文本垂直居中，不会出现上下被裁切的情况；
• span的max-height限制为48px，确保最多显示两行文本，超出部分直接隐藏，完全符合你的行数限制需求；
• 容器的overflow-x:auto在表格宽度超过600px时自动显示横向滚动条，交互更友好；
• 所有属性都兼容IE11，完全不需要依赖min-content这类不支持的属性。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates