Title: Mobile Responsive Vertical Header Table
Last modified: August 23, 2022

---

# Mobile Responsive Vertical Header Table

 *  Resolved [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/)
 * Hi Tobias!
 * First of all, thanks for the great plugin that you have created! It is simple
   and easy to use!
 * I am looking for some help as I am not really a CSS coder. I have created a table
   with vertical headers using “first_column_th=true” in the shortcode. I would 
   like to make it mobile responsive by displaying it as a block, stacking like 
   your Responsive Tables extension plugin, but not in the form of:
 * A1
    B1 C1
 * Example of what I’m looking for is:
 * B1
    B2 B3
 * C1
    C2 C3
 * Where vertical column A is the header.

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15940984)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * This is not directly possible right now, but I’m working on something for the
   future. In the mean time, you can achieve something like this with some CSS code.
   Please see [https://wordpress.org/support/topic/responsive-stylinog/#post-12222893](https://wordpress.org/support/topic/responsive-stylinog/#post-12222893)
   for more. (You should then remove the `first_column_th` parameter again though,
   as it would be interfering.)
 * Regards,
    Tobias
 *  Thread Starter [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15941372)
 * Thanks for the reply [@tobiasbg](https://wordpress.org/support/users/tobiasbg/)!
   Guess I’ll have to make use of horizontal header instead.
 * I have one more question that I would like to ask. How can I stylize the table
   name? I have tried using
 * `.tablepress-table-name .tablepress-table-name-id-1`
 * but my CSS doesn’t work on it.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15941936)
 * Hi,
 * yes, that will be the best.
 * As for styling the table name, just use
 *     ```
       .tablepress-table-name-id-1 {
         ...
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15994424)
 * Thanks for the reply Tobias! It works!
 * I have another question. What do I need to do to separate the stacked rows while
   in mobile using your Responsive Extension plugin?
 * Best regards,
    Ben
    -  This reply was modified 3 years, 9 months ago by [Benjamin Pau](https://wordpress.org/support/users/soapking/).
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15994972)
 * Hi,
 * Can you please post a link to the page with the table where this problem happens,
   so that I can take a direct look? Thanks!
 * Regards,
    Tobias
 *  Thread Starter [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15995388)
 * Hi Tobias,
 * Unfortunately my site is blocked off for visitors/bots that are outside of my
   country with Cloudflare. Is it okay that I post a screen shot of what I mean?
 * > [Tablepress desktop and mobile view](https://imgur.com/a/006A8nO)
 * The top picture is on desktop and the bottom is on mobile. I want to separate
   the rows on mobile with some spacing to differentiate the specification based
   on volume of the bin.
 * Best regards,
    Benjamin Pau
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15996040)
 * Hi,
 * ok, I’ll have to guess the code then 🙂 Please try adding this to the “Custom
   CSS” textarea on the “Plugin Options” screen of TablePress:
 *     ```
       @media screen and (max-width: 768px) {
         .tablepress-id-123 tr {
           margin-top: 20px;
         }
       }
       ```
   
 * where 123 is the table ID.
 * Regards,
    Tobias
 *  Thread Starter [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15997446)
 * Hi Tobias,
 * I have tried using
 *     ```
       @media screen and (max-width: 768px) {
         .tablepress tr {
           margin-top: 20px;
         }
       }
       ```
   
 * in the CSS section of Elementor Pro in my Single Products template but seems 
   like it is not working.
 * Regards,
    Ben
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15997840)
 * Hi,
 * ok, another try:
 *     ```
       @media screen and (max-width: 768px) {
         .tablepress-id-123 tr td:first-child {
           margin-top: 20px;
         }
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [Benjamin Pau](https://wordpress.org/support/users/soapking/)
 * (@soapking)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/#post-15998255)
 * Hi Tobias,
 * Thanks for the code! It works!
 * Regards,
    Ben
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/page/2/#post-15998339)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * Best wishes,
    Tobias   P.S.: In case you haven’t, please rate TablePress [here](https://wordpress.org/support/plugin/tablepress/reviews/#new-post)
   in the plugin directory. Thanks!

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

The topic ‘Mobile Responsive Vertical Header Table’ 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/)

 * 16 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [3 years, 9 months ago](https://wordpress.org/support/topic/mobile-responsive-vertical-header-table/page/2/#post-15998339)
 * Status: resolved