时间戳

首页 > 解决方案 > 如何将表格行溢出到第二列？

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>

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

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

有没有更直接的方法来生成这样的多列表？我真的没有在HTML 规范中看到任何明显的东西。

<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>

标签： htmlcsshtml-table

解决方案

编辑： 使用尽可能多的 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>

推荐阅读