Title: Table width on ipad
Last modified: November 26, 2018

---

# Table width on ipad

 *  Resolved [pbwpwork](https://wordpress.org/support/users/pbwpwork/)
 * (@pbwpwork)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/table-width-on-ipad/)
 * Hi Tobias,
 * Just a little question about viewing my table on ipad (landscape). Here is the
   full code:
 *     ```
       @media (max-width: 768px) {
   
       	.tablepress-id-2 th {
       	}
   
       	.tablepress-id-2 .row-1 .column-2 {
       		vertical-align: middle;
       		text-align: center;
       	}
   
       	.tablepress-id-2 td {
       		font-size: 10px;
       		line-height: 13px;
       	}
   
       	.tablepress-id-2 img {
       		min-width: 50px;
       		max-width: 100%;
       		vertical-align: middle;
       	}
   
       }
   
       @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
   
       	table.tablepress-id-2 {
       		width: 400px;
       		margin: 0 auto 1em;
       	}
   
       	.tablepress-id-2 .row-1 .column-1 {
       		background-color: #33FFB2;
       	}
   
       }
   
       .tablepress-id-2 .row-1 .column-2 {
       	vertical-align: middle;
       	text-align: center;
       }
   
       .tablepress-id-2 .row-1 .column-1 {
       	background-color: #05affd;
       }
   
       .tablepress-id-2 .row-3 .column-2 {
       	background-color: #05affd;
       }
       ```
   
 * As you can see, it looks pretty good on all devices, apart from on Landscape 
   ipad where the table seems to be a bit wide for the grey section. If you notice
   the blue box that says: ‘Beef & Onion’, seems to be bleeding out onto the white.
 * In:
 *     ```
       @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
   
       	table.tablepress-id-2 {
       		width: 400px;
       		margin: 0 auto 1em;
       	}
   
       	.tablepress-id-2 .row-1 .column-1 {
       		background-color: #33FFB2;
       	}
   
       }
       ```
   
 * I have tried to force the table to narrow when it is display on Ipad (Landscape)
   but it does not take effect (even my change of background colour does not work).
 * Can you please advise?
 * Cheers,
 * Paul
 * (p.s. I Love Your Plugin)
    -  This topic was modified 7 years, 5 months ago by [pbwpwork](https://wordpress.org/support/users/pbwpwork/).
    -  This topic was modified 7 years, 5 months ago by [pbwpwork](https://wordpress.org/support/users/pbwpwork/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftable-width-on-ipad%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/table-width-on-ipad/#post-10917653)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Sorry, but I have no real idea why this happens on the iPad. Your CSS code looks
   fine to me.
 * Regards,
    Tobias
 *  Thread Starter [pbwpwork](https://wordpress.org/support/users/pbwpwork/)
 * (@pbwpwork)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/table-width-on-ipad/#post-10930406)
 * Hi Tobias,
 * I actually fixed that problem (by reducing the text size in the table for ipad
   user) and it now looks great! The only problem is that I have lost the ability
   to stack my table (on the mobile – using your Responsive Tables plugin). I am
   trying it on a completely new table just to be sure that I have no crossovers
   in terms of plugins.
 * So the page is:
 * [http://barnyzpimpmypie.freesite.host/?page_id=134](http://barnyzpimpmypie.freesite.host/?page_id=134)
 * the code on the page is:
    `[table id=7 responsive=flip responsive_breakpoint=
   phone /]`
 * And my CSS is:
 *     ```
       @media (max-width: 767px) {
   
       	.tablepress-id-7-responsive-phone thead {
       		position: relative !important;
       		overflow: auto !important;
       		clip: auto !important;
       		width: auto !important;
       		height: auto !important;
       		margin: 0 !important;
       	}
   
       }
       ```
   
 * The last time I did this (on the mobile) I had all 4 pictures neatly stacked 
   one on top of one each other. But now I can’t seem to get the stacked effect –
   it is now scrolling. Can you tell me where I have gone wrong?
 * Cheers,
 * Paul
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/table-width-on-ipad/#post-10930625)
 * Hi,
 * you probably had the stack effect by “accidentally” turning on “Horizontal Scrolling”
   on the table’s “Edit” screen.
 * For this table, I would recommend NOT using the `flip` mode, but just some CSS:
 *     ```
       @media (max-width: 767px) {
       	.tablepress-id-7 tbody td {
       		display: block;
       	}
       }
       ```
   
 * Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Table width on ipad’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [table width](https://wordpress.org/support/topic-tag/table-width/)

 * 3 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/table-width-on-ipad/#post-10930625)
 * Status: resolved