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.
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 issue is pushing me against the wall and I would really appreciate any help!
source to share
According to the Quirksmode list, it is supported, but only for static content. A possible workaround is to provide column classes instead.
source to share