如何根据其他列内容动态设置表格中divider的高度？

方法一：直接利用表格单元格边框（最简便） #

不用额外的div，直接给分隔线所在的<td>设置样式，让单元格的边框作为分隔线，单元格高度会自动和其他列保持一致，完全适配内容变化：

<table>
  <td>First Name (Not editable)</td>
  <td class="divider-td"></td>
  <td>ABC</td>
</table>

/* 重置表格默认间距，避免干扰 */
table {
  border-collapse: collapse;
}
.divider-td {
  width: 1px;
  background-color: black;
  padding: 0; /* 去掉内边距，让分隔线更紧凑 */
}

方法二：保留div实现自适应高度 #

如果必须保留内部的.dividerdiv，通过定位让div撑满整个单元格高度：

<table>
  <td>First Name (Not editable)</td>
  <td class="divider-container">
    <div class="divider"></div>
  </td>
  <td>ABC</td>
</table>

table {
  border-collapse: collapse;
}
.divider-container {
  position: relative;
  width: 1px;
  padding: 0; /* 消除内边距，避免分隔线上下有空隙 */
}
.divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: black;
}

核心逻辑 #

表格单元格的高度默认由内容最高的列决定，只要让分隔线元素（单元格本身或内部div）的高度和单元格高度绑定，就能实现随内容动态调整的效果。第一种方法最简洁，第二种适合必须保留div结构的场景。

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