将要更改的HTML表
将要更改的HTML表
提问于 2021-09-14 05:30:23
我在复制时遇到了问题。我正在尝试制作一个根据窗口大小变化的表。当窗口很大时，我希望表格看起来像“大屏幕”图形，而当窗口小时，我希望表格看起来像“小屏幕”图形。
我现在有的是这个。当窗口很大时，我就有了所需的布局。
当我缩小预览窗口时，我的表格会折叠成一列，而不是我想要的样子。它应该看起来像上面截图上的“小屏幕”图形。
回答 1
Stack Overflow用户
发布于 2021-09-14 06:22:00
使用display: block为您的媒体查询显示。
表格的默认显示值将是display: table; thead将是display: table-header-group;，tbody将是display: table-row-group;，tr将是display: table-row;，th和td将是display: table-cell;。
要将表头和表体内容折叠到多行中，必须使用display: block、float: left、box-sizing: border-box;
要更新标题的内容，您应该执行一次tweek。将标签COMPARISON移动到as span。在较小的分辨率上，隐藏sapn并将内容添加到after伪元素。
.table-container {
display: block;
margin: 1em auto;
width: 100%;
max-width: 600px;
border-collapse: collapse;
}
.flag-icon {
margin-right: 0.1em;
}
.flex-row {
width: 20%;
border: 1px solid palevioletred;
}
.flex-row,
.flex-cell {
text-align: center;
}
@media only screen and (max-width: 600px) {
.table-container {
display: block;
}
th,
td {
width: auto;
display: block;
}
.flex-row {
width: 25%;
float: left;
box-sizing: border-box;
}
.flex-row.first {
width: 100%;
text-align: left;
}
thead,
thead tr,
tbody,
tbody tr {
display: block;
}
.header .flex-row.first span {
display: none;
}
.header .flex-row.first:after {
content: 'HOW THE PLAYERS COMPARE';
}
}<table class="table-container" width="100%" role="table" aria-label="Destinations">
<thead>
<tr class="flex-table header" role="rowgroup">
<th class="flex-row first" role="columnheader">
<span>COMPARISON</span>
</th>
<th class="flex-row" role="columnheader">player 1</th>
<th class="flex-row" role="columnheader">player 2</th>
<th class="flex-row" role="columnheader">player 3</th>
<th class="flex-row" role="columnheader">player 4</th>
</tr>
</thead>
<tbody>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Speed</td>
<td class="flex-row" role="cell">11Sp </td>
<td class="flex-row" role="cell">22Sp</td>
<td class="flex-row" role="cell">33Sp</td>
<td class="flex-row" role="cell">44Sp</td>
</tr>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Endurance</td>
<td class="flex-row" role="cell">11E </td>
<td class="flex-row" role="cell">22E</td>
<td class="flex-row" role="cell">33E</td>
<td class="flex-row" role="cell">44E</td>
</tr>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Strength</td>
<td class="flex-row" role="cell">11St </td>
<td class="flex-row" role="cell">22S</td>
<td class="flex-row" role="cell">33S</td>
<td class="flex-row" role="cell">44S</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69172261
复制相关文章
相似问题
腾讯云开发者
