如何基于对应索引td的最大高度动态设置表格表头th的高度？

这问题其实没你想的那么复杂，咱们直接按你最初的思路落地就行，核心就是按索引匹配列，找出对应列的最大高度再赋值给表头。下面是具体的实现方案：

核心思路拆解 #

• 遍历每个表头<th>，拿到它在当前行的索引位置
• 针对这个索引，遍历表格主体<tbody>里的每一行，取出对应列的<td>元素
• 收集这些<td>的高度值，找出其中的最大值
• 将这个最大值设置给当前的<th>

完整代码实现 #

HTML结构（用你提供的示例） #

<table class="responsive-table">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="height:100px;">This content is 100px</td>
      <td style="height:50px;">This content is 50px</td>
    </tr>
    <tr>
      <td style="height:50px;">This content is 50px</td>
      <td style="height:200px;">This content is 200px</td>
    </tr>
  </tbody>
</table>

jQuery代码 #

$(document).ready(function() {
  // 遍历每个表头th
  $('thead th').each(function() {
    const thIndex = $(this).index(); // 获取当前th的列索引
    let maxHeight = 0; // 初始化最大高度
    
    // 遍历tbody里的每一行
    $('tbody tr').each(function() {
      // 取出当前行中对应索引的td，获取它的高度
      const tdHeight = $(this).find('td').eq(thIndex).outerHeight();
      // 更新最大高度
      if (tdHeight > maxHeight) {
        maxHeight = tdHeight;
      }
    });
    
    // 将最大高度设置给当前th
    $(this).height(maxHeight);
  });
});

关键细节说明 #

1. 索引匹配：用$(this).index()获取<th>在<tr>中的位置，确保我们找的是同一列的<td>
2. 高度获取：这里用了outerHeight()，它会包含元素的内边距（padding）和边框（border）；如果只需要内容高度，可以换成height()
3. MaterializeCSS兼容：因为Materialize的responsive-table会让表头块级显示、内容横向滚动，这个逻辑完全适配这种布局，不会冲突

额外优化建议 #

如果表格内容是动态加载的（比如异步获取数据后渲染），记得在内容渲染完成后再调用这段代码，否则会因为找不到<td>元素而失效。

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