Title: Responsive table/Fixedheader/horizontal scroll
Last modified: August 30, 2016

---

# Responsive table/Fixedheader/horizontal scroll

 *  Resolved [bandit1730](https://wordpress.org/support/users/bandit1730/)
 * (@bandit1730)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/responsive-tablefixedheaderhorizontal-scroll/)
 * Hello again Tobias.
 * Have tried everything trying to make rate tables look as intended (on my end)
   on mobile devices, but having to luck.
    I found out that when applying “FixedHeader”,
   the “Horizontal Scrolling” option doesn’t work. Also, the “FixedHeader” creates
   a duplicate header on page landing (it disappears as soon as you interact with
   page). I already tried the “Responsive Tables” plugin. It could work but it needs
   some tweaking. This is what happens when the plugin is applied:
    - The header cells “on left column” don’t align with the rest of cells “on right
      columns” (I need to make all cells the same line height)
    - I will also need to change header cell background colors and/or add cell borders
      in order to make it easier to read
 * This fixes are only for mobile devices. Is there a way to apply CSS rules just
   to “phone” & “Tablet”?
    [http://123corporatetransportation.com/destinations/miami-car-service-airport-transfers-naples-marco_island-south_beach/](http://123corporatetransportation.com/destinations/miami-car-service-airport-transfers-naples-marco_island-south_beach/)
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/responsive-tablefixedheaderhorizontal-scroll/#post-6214324)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Yes, due to how it works internally, the FixedHeader Extension’s JS code (which
   I did not develop, but only package as a TablePress Extension) is not compatible
   with the “Horizontal Scrolling” option of the DataTables JS library.
 * The reason for the misaligned cells in the responsive mode is caused by your 
   theme, which is adding own CSS code for the padding in the table cells. To fix
   that, please try adding this to the “Custom CSS” textarea on the “Plugin Options”
   screen of TablePress:
 *     ```
       .tablepress th,
       .tablepress td {
       	padding: 8px !important;
       }
       ```
   
 * To apply CSS rules only in the “phone” mode, you could use a CSS3 Media Query,
   where you place your changes inside something like
 *     ```
       @media (max-width: 767px) {
         ...
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [bandit1730](https://wordpress.org/support/users/bandit1730/)
 * (@bandit1730)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-tablefixedheaderhorizontal-scroll/#post-6214492)
 * Hello again.
 * Problem solved.
    added the following code to plugin css (tablepress-responsive-
   tables/tablepress-responsive.min.css)> [@media](https://wordpress.org/support/users/media/)(
   max-width: 767px): ************************************************** .dataTables_wrapper.
   tablepress-responsive-phone .column-2 { background-color: #e0e0e0 !important;
   color: #333333 !important; padding: 8px !important; text-align: left !important;}.
   dataTables_wrapper .tablepress-responsive-phone .row-1 th { text-align: left !
   important; } .dataTables_wrapper .tablepress-responsive-phone .column-3, .dataTables_wrapper.
   tablepress-responsive-phone .column-4, .dataTables_wrapper .tablepress-responsive-
   phone .column-5, .dataTables_wrapper.tablepress-responsive-phone .column-6, .
   dataTables_wrapper .tablepress-responsive-phone .column-7, .dataTables_wrapper.
   tablepress-responsive-phone .column-8 { text-align: center !important; padding:
   8px !important; width: auto !important; border-bottom-width: 1px; border-bottom-
   style: solid; border-bottom-color: #CCC; } .dataTables_wrapper .tablepress-responsive-
   phone thead th, .dataTables_wrapper .tablepress-responsive-phone tbody td { height:
   25px !important; }
 * Thank you very much.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-tablefixedheaderhorizontal-scroll/#post-6214498)
 * 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](http://wordpress.org/support/view/plugin-reviews/tablepress)
   here in the plugin directory. Thanks!

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

The topic ‘Responsive table/Fixedheader/horizontal scroll’ 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

 * [fixedheader](https://wordpress.org/support/topic-tag/fixedheader/)
 * [horizontal scroll](https://wordpress.org/support/topic-tag/horizontal-scroll/)

 * 3 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-tablefixedheaderhorizontal-scroll/#post-6214498)
 * Status: resolved