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>

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

  • Is there any code or screenshots you can post to explain this better? – socki03 Dec 2 '16 at 22:09
  • I added a pic of how it looks on iphone. Didnt have enough reputation pts to post a second pic. How it looks on non-mobile is each category in the a product is in a row. – Meds86 Dec 3 '16 at 3:50
  • I've hopefully made my question clearer to understand – Meds86 Dec 6 '16 at 0:49

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.