Html 如何将表行溢出到第二列？

我有一个包含数百个短行的表，我希望以列的形式显示行，而不是所有行都显示在彼此下面，如下所示：

我知道我可以创建两个表并对齐它们，但出于可访问性的目的，我更希望它是一个表，因此上面的HTML类似于：

<table>
    <thead>
        <tr><th>Col 1</th><th>Col 2</th></tr>
    </thead>
    <tbody>
        <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr>
        <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td></tr>
        <tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td></tr>
        <tr><td>Row 4 Col 1</td><td>Row 4 Col 2</td></tr>
    </tbody>
</table>

第1列第2列
第1列第1列第2列第1列
第2列第1列第2列第2列
第3列第1列第3列第2列
第4列第1列第4列第2列

我能做到的最接近的方法是添加多个tbody元素并将它们与flexbox对齐（见下文），但这样做的缺点是标题和标题显示不正确：

我可以通过一些HTML/CSS fu，或者通过删除thead并在tbody中插入header元素（没有thead）来解决这个问题，但它看起来相当难看

有没有更直接的方法来生成这样的多列表？ 我真的没有看到任何明显的变化

表{边框折叠：折叠；}
td{border:1px solid#000；}
表{display:flex；justify content:flex start；}
t正文{右边距：1em；}
表测试
第1列第2列
第1列第1列第2列第1列
第2列第1列第2列第2列
第3列第1列第3列第2列
第4列第1列第4列第2列

编辑： 使用尽可能多的HTML完成重写。也删除了最后一个答案

此版本将动态缩放以适应页面，但您需要让CSS知道您希望更改的屏幕大小。当前设置为

520px

您需要将代码复制并粘贴到测试页面，并调整窗口大小以查看动态大小

表格{
宽度：100%；
最大宽度：520px；
文本对齐：居中；
}
特维德先生{
显示：无；
}
@介质和全部（最小宽度：520px）{
特威德{
显示：内联块；
宽度：46%；
}
thead tr th{
显示：内联块；
宽度：46%；
文本对齐：居中；
}
t车身{
显示：内联块；
宽度：46%；
}
td，th{宽度：23%；}
}

表测试
第1列第2列
第1列第2列
第1列第1列第2列第1列
第2列第1列第2列第2列
第3列第1列第3列第2列
第4列第1列第4列第2列

为什么使用表格？因为它是（有序的）表格数据@AHBagheri。我非常赞成将页面设计为易于阅读和使用屏幕阅读器等工具访问，据我所知，使用表格是实现表格数据的最佳方法，但如果有其他方法允许保留这些属性，我不会坚持使用表格。