iPhone Safari:最后一个孩子不在表格中呈现

时间:2013-02-18 19:35:06

标签: iphone css mobile-safari css-selectors

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

这是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只是一个由tabletheadthtbodytda属性构成的简单表格最后一栏。

<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屏幕上渲染时会产生奇怪的结果。 Image showing how the last column is not rendering.

如您所见,只有一列。最后一列没有渲染。

旋转设备横向然后将其返回到纵向会使最终列显示(有时),这很奇怪。见下文。

This shows what the table should actually look like.

这个问题让我感到困扰,我非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

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