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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

也许不是您正在寻找的答案，但如果您在HTML for desktop中切换到display: table而不是实际<table>，则可以编写媒体查询以进行显示在移动设备上甚至不是一张桌子（例如你可以将它们设置为移动设备上的块div）。

Answer 3

您可以使用div而不是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>

HTML表格：如何堆叠列而不是行显示移动设备？

3 个答案: