iPhone Safari :last-child not rendering in table - iphone

Question

I have a responsive layout that, below a certain breakpoint, displays only the first and last columns of a table such 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;
}
}
The HTML is just a simple table made of table, thead, th, tbody, td and also a attributes in the final column.
<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 hasn't rendered.
Rotating the device landscape and then returning it to portrait makes the final column display (sometimes), which is strange. See below.
This problem is driving me up the wall and I would greatly appreciate any help!

Answer 1

As per the Quirksmode list, it's supported but only for static content. A possible workaround is to give the columns classes instead.