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

Question

我有一个包含数百个短行的表，我想将这些行显示为列，而不是将所有行排在下面，就像这样：

我知道我可以创建两个表并对齐它们，但是出于可访问性的目的，我希望它是一个表，因此上述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>

我设法获得的最接近的结果是添加多个tbody元素并将它们与flexbox对齐（请参见下文），但这有一个缺点，就是标题和标题将无法正确显示：

我可以用一些HTML / CSS-fu来解决此问题，或者通过移除thead并将标题元素插入tbody中（不使用thead）来解决，但这看起来很丑。

是否有更直接的方法来生成像这样的多列表？ 我在the HTML specification中看不到明显的东西。

<style>
	table { border-collapse: collapse; }
	td    { border: 1px solid #000; }
	table { display: flex; justify-content: flex-start; }
	tbody { margin-right: 1em; }
</style>

<table>
	<caption>Table test</caption>
	<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>
	</tbody>
	<tbody>
		<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>

Answer 1

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

此版本将动态缩放以适合页面，但是您需要让CSS知道您要更改的屏幕尺寸。当前设置为520px。

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

table {
    width:100%;
    max-width:520px;
    text-align:center;
}
.tWide {
    display:none;
}
@media all and (min-width:520px) {
    thead tr, .tWide {
        display:inline-block;
        width:46%;
    }
    thead tr th {
        display:inline-block;
        width:46%;
        text-align:center;
    }
    tbody {
        display:inline-block;
        width:46%;
    }
    td, th { width:23%; }
}

<table>
    <caption>Table test</caption>
    <thead>
        <tr><th>Col 1</th><th>Col 2</th></tr>
        <tr class="tWide"><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>
    </tbody>
    <tbody>
        <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>