如何使HTML table的cols规则延伸至容器边框且仅调整列规则

要实现列分隔线延伸到外层div边框，同时避免表格内容随高度调整被缩放，你可以通过以下CSS修改来实现：

方法一：基于原生rules="cols"调整 #

修改后的CSS代码：

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
}

table {
  border: 1px solid;
  table-layout: fixed;
  height: 100%; /* 让表格完全填充外层div高度 */
  width: 100%; /* 让表格宽度占满容器 */
  border-collapse: collapse; /* 合并边框，保证分隔线连续 */
}

tbody {
  height: 100%; /* 让tbody占据表格全部可用高度 */
}

tbody tr:last-child td {
  height: 100%; /* 最后一行单元格填充剩余空间 */
  vertical-align: top; /* 内容置顶，防止被垂直拉伸 */
}

关键修改说明： #

• table { height: 100%; width: 100%; }：强制表格撑满外层div的宽高，让列分隔线的高度跟随表格延伸到容器边框。
• border-collapse: collapse：消除表格默认的边框间距，确保rules="cols"的分隔线显示连贯。
• tbody tr:last-child td { height: 100%; vertical-align: top; }：让最后一行单元格填充tbody的剩余高度，同时保持内容置顶，避免表格内容因高度调整被拉伸变形。

方法二：CSS自定义列分隔线（更可控） #

如果原生rules="cols"的表现不够灵活，可以用CSS直接模拟列分隔线，效果更稳定：

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
}

table {
  border: 1px solid;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border-right: 1px solid #000; /* 添加列右侧分隔线 */
  padding: 8px; /* 增加内边距提升可读性 */
}

th:last-child, td:last-child {
  border-right: none; /* 去掉最后一列的右侧分隔线 */
}

tbody {
  height: 100%;
}

这种方式直接通过单元格边框实现列分隔，完全不受表格内容高度影响，只要表格撑满div，分隔线就会自动延伸到容器底部。

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