3

我有一个响应式布局，在某个断点下方，只显示表格的第一列和最后一列，以减少所需的空间量。

这是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一列中的属性组成。tbodytda

<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 屏幕上渲染时会产生奇怪的结果。 显示最后一列未呈现的图像。

如您所见，只有一列。最后一列尚未呈现。

旋转设备横向然后将其恢复为纵向会使最后一列显示（有时），这很奇怪。见下文。

这显示了表格的实际外观。

这个问题让我陷入困境，我将不胜感激任何帮助！

4

1 回答 1

0

根据Quirksmode list，它受支持，但仅适用于静态内容。一种可能的解决方法是改为提供列类。

于 2013-03-05T09:34:42.317 回答