javascript - HTML 表格 : how to stack columns rather than rows for mobile display?

Question

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

A1

A2

A3

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。