Table header not aligned with table content

  • Resolved supreetkaler

    (@supreetkaler)


    7 years, 10 months ago

    Hi there,
    Thanks you for great plug-in. Actually I’m facing a problem in my tables. I turned ON the scrolling horizontal feature in my table, and it just showing me a problem in layout i.e., The Table Header is not aligned to Table Body, if I just minimize the window. this problem goes away and everything works fine. I’m having this issue with my whole website.

    I have added the link of page, one table is with Scrolling Horizontal function ON and other is without it.
    You help is much appreciated.
    Thanks,
    Supreet Singh

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    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

    Thread Starter supreetkaler

    (@supreetkaler)

    7 years, 10 months ago

    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

    Thread Starter supreetkaler

    (@supreetkaler)

    7 years, 10 months ago

    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 7 years, 10 months ago by supreetkaler.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    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

    Thread Starter supreetkaler

    (@supreetkaler)

    7 years, 10 months ago

    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.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

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

    Best wishes,
    Tobias

    Thread Starter supreetkaler

    (@supreetkaler)

    7 years, 10 months ago

    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: http://www.crdcreighton.com/products/attachments/epiroc-ec-hydraulic-breakers/

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    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

    Thread Starter supreetkaler

    (@supreetkaler)

    7 years, 10 months ago

    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

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    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 10 replies - 1 through 10 (of 10 total)

The topic ‘Table header not aligned with table content’ is closed to new replies.