IPhone Safari: Last-Last Not Rendering in Table

I have a responsive layout that, below a certain breakpoint, only displays the first and last columns of a table to reduce the amount of space needed.

Here is the 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 - it's just a table consisting of table

, thead

, th

, tbody

, td

, and a

in the last column attributes.

<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>

      

However, this produces strange results when rendering on the iPhone screen. Image showing how the last column is not rendering.

As you can see, there is only one column. The last column is not displayed.

Rotating the landscape of the device and then returning it to portrait makes the last column (sometimes) which is weird. See below.

This shows what the table should actually look like.

This issue is pushing me against the wall and I would really appreciate any help!

+3


source to share


1 answer


According to the Quirksmode list, it is supported, but only for static content. A possible workaround is to provide column classes instead.



0


source







All Articles