Responsive table/Fixedheader/horizontal scroll

  • Resolved bandit1730

    (@bandit1730)


    9 years, 9 months ago

    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”?
    https://123corporatetransportation.com/destinations/miami-car-service-airport-transfers-naples-marco_island-south_beach/

    https://www.ads-software.com/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    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

    (@bandit1730)

    Hello again.

    Problem solved.
    added the following code to plugin css (tablepress-responsive-tables/tablepress-responsive.min.css)> @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

    (@tobiasbg)

    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 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.