我有一个响应式布局,在某个断点之下,只显示表的第一列和最后一列,以减少所需的空间量。
这是CSS ...
@media only screen and (max-width: 749px) {
#content-container table thead th {
display: none;
}
#content-container table thead th:first-child {
display: table-cell !important;
}
#content-container table thead th:last-child {
display: table-cell !important;
}
}
@media only screen and (max-width: 749px) {
#content-container table tbody tr td {
display: none;
}
#content-container table tbody tr td:first-child {
display: table-cell !important;
}
#content-container table tbody tr td:last-child {
display: table-cell !important;
}
}
HTML只是一个由table
,thead
,th
,tbody
,td
和a
属性构成的简单表格最后一栏。
<table>
<thead>
<tr>
<th>Flight</th>
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th style="width: 140px;">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td style="width: 140px;">
<a style="display: inline-block;" href="#">Remove</a>
<a style="display: inline-block;" href="#">Brief</a>
</td>
</tr>
</tbody>
</table>
但是,在iPhone屏幕上渲染时会产生奇怪的结果。
如您所见,只有一列。最后一列没有渲染。
旋转设备横向然后将其返回到纵向会使最终列显示(有时),这很奇怪。见下文。
这个问题让我感到困扰,我非常感谢任何帮助!