HTML表格:如何堆叠列而不是行以进行移动显示?

Question

对于带有垂直标题的 html 表格，我将如何堆叠列而不是行以进行移动显示？换句话说，在移动设备上实现如下所示的输出：

答1

答2

答3

B1

B2

B3

C1

C2

C3

在普通表格(水平标题(中，这种移动效果非常简单。请参阅示例(移动宽度设置得大得离谱，以强制在桌面上生效(：

table {
border: 1px solid grey;
border-collapse: collapse;
}
th {
border: 1px solid grey;
padding: 10px;
}
td {
border: 1px solid grey;
padding: 10px;
}
@media screen and (max-width: 20000px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
content: attr(data-th); 
display: block;
text-align:center;  
}
}

<table>
<thead>
<tr>
<th>Header A</th>
<th>Header B</th>
<th>Header C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>

但是对于我的不规则表格(垂直标题(，我完全不知道如何达到同样的效果。参见示例(没有尝试移动效果，只是表格(：

table {
border: 1px solid grey;
border-collapse: collapse;
}
th {
border: 1px solid grey;
padding: 10px;
}
td {
border: 1px solid grey;
padding: 10px;
}

<table class='comparison-table'>
	<tr>
		<th>Header A</th>
		<td>A1 </td>
		<td>A2</td>
		<td>A3</td>
	</tr>
	<tr>
		<th>Header B</th>
		<td>B1</td>
		<td>B2</td>
		<td>B3</td>
	</tr>
	<tr>
		<th>Header C</th>
		<td>C1</td>
		<td>C2</td>
		<td>C3</td>
	</tr>
	<tr>
		<th>Header D</th>
		<td>D1</td>
		<td>D2</td>
		<td>D3</td>
	</tr>
</table>

任何人都知道我该如何为第二张桌子做，与我为第一张桌子所做的大致相同？

谢谢吨！

Answer 1

table {
border: 1px solid grey;
border-collapse: collapse;
width: 100%;
}
th {
border: 1px solid grey;
padding: 10px;
display: block;
text-align: center;
}
td {
border: 1px solid grey;
padding: 10px;
display: block;
text-align: center;
}

<table class='comparison-table'>
	<tr>
		<th>Header A</th>
		<td>A1 </td>
		<td>A2</td>
		<td>A3</td>
	</tr>
	<tr>
		<th>Header B</th>
		<td>B1</td>
		<td>B2</td>
		<td>B3</td>
	</tr>
	<tr>
		<th>Header C</th>
		<td>C1</td>
		<td>C2</td>
		<td>C3</td>
	</tr>
	<tr>
		<th>Header D</th>
		<td>D1</td>
		<td>D2</td>
		<td>D3</td>
	</tr>
</table>

在表格单元格上添加了display: block。

Answer 2

您可以使用divs代替table，如下所示：

@media screen and (min-width: 900px) {
.block {
display: block;
float: left;
width: 24.9%;
vertical-align: top;
}
.header.block {
clear: both;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
.block {
display: block;
float: left;
width: 33.3%;
vertical-align: top;
}
.header.block {
clear: both;
display: block;
width: 100%;
}
}
@media screen and (max-width: 599px) {
.block {
display: block;
}
}

html 它看起来像这样：

<div>
<div class="header block">A - header block</div>
<div class="block">A1<br>a1</div>
<div class="block">A2</div>
<div class="block">A3</div>
<div class="header block">B - header block</div>
<div class="block">B1</div>
<div class="block">B2<br>b2</div>
<div class="block">B3</div>
<div class="header block">C - header block</div>
<div class="block">C1</div>
<div class="block">C2</div>
<div class="block">C3<br>c3</div>
</div>

Answer 3

也许不是您要查找的答案，但是如果您切换到display: table而不是桌面HTML中的实际<table>，则可以编写媒体查询以使移动设备上的显示甚至不是表格(例如，您可以将它们设置为移动设备上的块div(。