如何实现表格高度达标或触底时自动新增垂直列？

算力阿峰

2026-8-20

实现垂直列表自动换行成多列的需求与解决方案

需求描述

我已经把table元素样式设置为垂直排列的列表效果，希望实现当表格垂直列达到指定长度或接近屏幕底部时，自动创建新的表格列。

现有代码

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: max-content;
}

td {
  height: max-content;
  vertical-align: center;
  text-align:center
}
</style>
</head>
<body>

<h2>Test</h2>

<p>This is just a test.</p>

<table>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
</table>

</body>
</html>

理想效果

当垂直排列的内容达到设定高度或接近屏幕底部时，自动在右侧生成新的列，将剩余内容填入，形成多列垂直列表布局。

解决方案

方案一：CSS Column布局（推荐，无需JS）

直接替换table结构为div容器，用CSS原生列布局实现自动换行，简单高效：

<!DOCTYPE html>
<html>
<head>
<style>
/* 列容器，设置高度后自动换行 */
.column-list {
  /* 自定义列高度，超出则新建列 */
  height: 600px;
  /* 自动生成列数，也可指定固定列数如columns: 3; */
  columns: auto;
  /* 列间距 */
  column-gap: 20px;
  /* 避免单个项被拆分到两列 */
  break-inside: avoid;
}

/* 列表项样式，模拟原table单元格效果 */
.column-list .item {
  padding: 8px;
  text-align: center;
  margin-bottom: 4px;
  border: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Test</h2>

<p>This is just a test.</p>

<div class="column-list">
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
    <div class="item">Random String Blah</div>
</div>

</body>
</html>

注意点：

调整height值可以控制每列的最大高度
如果不需要固定高度，也可以用max-height配合overflow: hidden，但height更直接触发列换行
兼容性好，现代浏览器都支持

方案二：保留Table结构的JS实现

如果必须用table，通过JS拆分行生成多个并列表格：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
}

td {
  padding: 8px;
  vertical-align: center;
  text-align:center;
  border: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Test</h2>

<p>This is just a test.</p>

<div id="table-container">
    <table>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
        <tr><td>Random String Blah</td></tr>
    </table>
</div>

<script>
// 自定义每列最大行数
const maxRowsPerColumn = 15;
const container = document.getElementById('table-container');
const originalTable = container.querySelector('table');
const rows = Array.from(originalTable.querySelectorAll('tr'));

// 拆分行到新表格
for (let i = maxRowsPerColumn; i < rows.length; i += maxRowsPerColumn) {
    const newTable = document.createElement('table');
    const chunk = rows.slice(i, i + maxRowsPerColumn);
    chunk.forEach(row => newTable.appendChild(row));
    container.appendChild(newTable);
}

// 移除原表格中已拆分的行
rows.slice(maxRowsPerColumn).forEach(row => row.remove());
</script>

</body>
</html>

扩展优化：

如果要实现“接近屏幕底部时自动换行”，可以把maxRowsPerColumn改成动态计算：

// 计算屏幕可用高度（减去标题等其他元素高度）
const availableHeight = window.innerHeight - document.querySelector('h2').offsetHeight - 50;
// 计算单个行的高度
const rowHeight = rows[0].offsetHeight;
// 得出每列最大行数
const maxRowsPerColumn = Math.floor(availableHeight / rowHeight);

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

如何实现表格高度达标或触底时自动新增垂直列？

需求描述 #

现有代码 #

理想效果 #

解决方案 #

方案一：CSS Column布局（推荐，无需JS） #