Table header not aligned with table content

Hi,

thanks for your question, and sorry for the trouble.

The reason for this is that you are showing the tables in the collapsable sections. This is not supported by the JavaScript code, as it can not make certain column widths calculations.
To work around this, I recommend to uncheck the “Use DataTables” checkbox on the table’s “Edit” screen and then use the horizontal scrolling that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers with its scroll mode.

Regards,
Tobias

Thank you very much for your reply.
Is this is the paid extensions you are suggesting me?
Is there is any other way around I can do ?
I don’t want to buy any extension.

Thanks in advance

Hi there,
Thank you very much. you saved my lot of time.
I downloaded the extension, and Scrolling mode works perfectly fine, But not Collapse or Flip mode.
One more favor can you do??,Can you add Scrolling bar onto Mobile view (its hard to recognize whether the Table has Scrolling view in it, we got to know by tapping only )

Thanks
Supreet Singh

• This reply was modified 6 years, 5 months ago by supreetkaler.

Hi,

technically, this is a Premium Extension, yes, but you don’t have to donate if you don’t want to (even though donations are what allow me to provide support like this).

Unfortunately, I don’t know a way to always show the scroll bar on mobiles. This is caused by iOS and Android only showing them during active scrolling.

Regards,
Tobias

Thank you for your reply.
I’m sorry I cannot Donate at this point of time.
I really appreciate your help every-time.
If my circumstances gets change, Will surely donate.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

Hi Tobias,
I have some problem in Mobile view, while using “responsive=flip”, 1st and 2nd column are not properly aligned with other rest of the columns.
Can you please tell me, what CSS I should change or any other alterations??

Link of page is: https://www.crdcreighton.com/products/attachments/epiroc-ec-hydraulic-breakers/

Hi,

please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (max-width: 767px) {
.tablepress-responsive-phone tbody tr td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
}

Regards,
Tobias

Thanks for your help.
The code which works fine for me is:

@media screen and (max-width: 768px) {

.tablepress thead th,
.tablepress tbody td {
font-size: 12px !important;
font-weight: normal !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: 1px solid #696969 !important;
}

}
I added it in Plugin Options onto Custom CSS.
Hope it helps others as well.
Thanks
Supreet Singh

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!