Question: In chrome, firefox everything is fine.

On mobile ios safari it looks like the pic. The columns won't collapse into rows.

Tried the guide but didn't seem to work
<https://css-tricks.com/accessible-simple-responsive-tables/>

I've tried

-setting to display:block to collapse columns into rows on responsive mobile.
-setting css for tr to display:table-row, width:100%; and setting td to display: table-row

The html is..

```
<tr class="cart-item">
 <td class="name"><a>productname</a></td>
 <td class="price"><a>number</a></td>
 <td class="quantity"><a>number</a></td>
 <td class="total"><a>number</a></td>
</tr> 

```

The CSS is.. 

```
.woocommerce table.shop_table_responsive tr td {
    display: table-row;
}

.woocommerce table.shop_table_responsive tr {
    display: table;
    width: 100%;
}

```

[![cart page on iphone6](https://i.stack.imgur.com/ghJt7.png)](https://i.stack.imgur.com/ghJt7.png)

Answer: 
I know it's bad practice to use !important frequently but you could use it on any style that's not showing just to check if your theme is overriding your code.
The solution is include to `<!DOCTYPE html>` in your html file. By the way, I do not know the exact reason that Safari requires doctype.