表格内图片下方标题过长时如何让单元格自适应并均匀对齐行高

方案1：原生HTML表格适配（推荐，无额外性能开销） #

给表格添加以下CSS规则即可生效：

table {
  table-layout: fixed;
  width: 100%; /* 必须指定明确宽度，table-layout属性才会生效 */
  border-collapse: collapse;
}
td {
  vertical-align: top;
  overflow-wrap: break-word; /* 长标题自动换行，避免内容溢出 */
  /* 以下规则保证同一行所有单元格高度自动对齐到最高值 */
  height: 60px; /* 可根据设计需求调整基础高度，内容超出时会自动撑开 */
}
/* 针对图片下方的标题单元格可单独配置垂直居中 */
.title-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 4px;
}

• 原生table自带同高度对齐特性，只要配置了table-layout: fixed，就会自动让同一行的所有单元格高度保持一致，不会出现长短不一的错位情况。

方案2：Flex/Grid模拟表格布局适配 #

如果是用div实现的网格卡片布局，用以下CSS规则：

/* Grid布局实现（最简便） */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 列数可根据需求调整 */
  gap: 16px; /* 卡片间距按需调整 */
}
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-title {
  flex: 1; /* 标题区域自动填充剩余高度，所有卡片标题区高度自动统一 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

方案3：JS兜底兼容方案 #

如果需要兼容IE8等极端老旧浏览器，CSS方案不生效时可使用JS统一计算高度：

window.addEventListener('load', function() {
  const titleEls = document.querySelectorAll('.product-title');
  let maxHeight = 0;
  // 遍历获取所有标题的最大高度
  titleEls.forEach(el => {
    el.style.height = 'auto'; // 先重置高度避免累计误差
    maxHeight = Math.max(maxHeight, el.offsetHeight);
  });
  // 统一设置所有标题高度
  titleEls.forEach(el => {
    el.style.height = maxHeight + 'px';
  });
});
// 窗口尺寸变化时重新计算高度
window.addEventListener('resize', function() {
  // 防抖处理可根据需求添加
  const event = new Event('load');
  window.dispatchEvent(event);
});

• 该方案会强制所有标题区域高度统一为最长标题的高度，完全避免错位问题。

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