响应垂直 html table
Responsive vertical html table
如果我有一个垂直定义的 table,标题如下:
https://codepen.io/Slagon/pen/YzGbgza
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
<th>Heading 7</th>
<th>Heading 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
</tbody>
</table>
阅读方向是从左到右,向下阅读每一列。
我将如何让它响应移动设备?
我想象每列一列,相互堆叠。像这样:
您正在寻找的是媒体查询。使用媒体查询,您可以根据页面 max/min 宽度使用 CSS 设置页面样式。
查看此内容以获取更多信息。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
这是一个示例,当屏幕的最大宽度为 900 像素时,应用该宽度时将应用以下 CSS。超出该范围的任何内容都将应用上述 CSS
.example {
font-size: 7rem;
width: 75%;
}
@media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
- 删除 table 样式
- 将格式化上下文设置为 flexbox
- 使用
order
属性 对 table 单元格重新排序
table * {
display: contents;
}
table {
display: flex;
flex-direction:column;
}
th, td {
display:block;
text-align:center;
}
tr > *:nth-child(1) { order:1;}
tr > *:nth-child(2) { order:2;}
tr > *:nth-child(3) { order:3;}
tr > *:nth-child(4) { order:4;}
tr > *:nth-child(5) { order:5;}
tr > *:nth-child(6) { order:6;}
tr > *:nth-child(7) { order:7;}
tr > *:nth-child(8) { order:8;}
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
<th>Heading 7</th>
<th>Heading 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
</tbody>
</table>
如果我有一个垂直定义的 table,标题如下:
https://codepen.io/Slagon/pen/YzGbgza
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
<th>Heading 7</th>
<th>Heading 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
</tbody>
</table>
阅读方向是从左到右,向下阅读每一列。 我将如何让它响应移动设备?
我想象每列一列,相互堆叠。像这样:
您正在寻找的是媒体查询。使用媒体查询,您可以根据页面 max/min 宽度使用 CSS 设置页面样式。
查看此内容以获取更多信息。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
这是一个示例,当屏幕的最大宽度为 900 像素时,应用该宽度时将应用以下 CSS。超出该范围的任何内容都将应用上述 CSS
.example {
font-size: 7rem;
width: 75%;
}
@media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
- 删除 table 样式
- 将格式化上下文设置为 flexbox
- 使用
order
属性 对 table 单元格重新排序
table * {
display: contents;
}
table {
display: flex;
flex-direction:column;
}
th, td {
display:block;
text-align:center;
}
tr > *:nth-child(1) { order:1;}
tr > *:nth-child(2) { order:2;}
tr > *:nth-child(3) { order:3;}
tr > *:nth-child(4) { order:4;}
tr > *:nth-child(5) { order:5;}
tr > *:nth-child(6) { order:6;}
tr > *:nth-child(7) { order:7;}
tr > *:nth-child(8) { order:8;}
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
<th>Heading 7</th>
<th>Heading 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
<tr>
<td>Content for Heading 1</td>
<td>Content for Heading 2</td>
<td>Content for Heading 3</td>
<td>Content for Heading 4</td>
<td>Content for Heading 5</td>
<td>Content for Heading 6</td>
<td>Content for Heading 7</td>
<td>Content for Heading 8</td>
</tr>
</tbody>
</table>