Fixed header column width shift

  • Resolved riflebird

    (@riflebird)


    3 years, 10 months ago

    Hi Tobias,

    I’ve looked over similar threads on this topic without success. Apologies if I’ve missed something.

    The header works great until it becomes fixed at which point the column widths shift and are no longer aligned with the table contents. Also, header cells lose their vertical border. It looks like maybe the first column is the only one that is resizing but this results in misalignment for all.

    Hope you can help.

    Many thanks,

    Dave

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for the border disappearing is how this is added to the CSS code by the theme. To keep it also for the fixed header, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress thead th {
    border-left: medium none;
    border-style: none solid solid none;
    border-top: medium none;
    border-width: medium 1px 1px medium;
    font-weight: bold;
    padding: 10px;
    text-align: left;
    border-color: #ececec;
}

    Unfortunately, I’m not sure why the width shift happens. I can’t find a specific reason for this ?? Now, the border might be related to this though, so please check the widths again after adding that CSS from above.

    Regards,
    Tobias

    Thread Starter riflebird

    (@riflebird)

    Hi Tobias,

    Thanks for the speedy response. The css for the missing border works a treat – thanks.

    However, the issue with the header column widths shifting on the fixed header format remains and, unfortunately, this renders the table unusable in this format. Because the table has so many rows, this fixed header (or something similar) is essential for good usability. Is there anything else you can suggest that I might try? Or is there another extension or an alternative approach that might resolve the problem?

    Many thanks,

    Dave

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sorry to hear that ??

    An alternative approach would be to use vertical scrolling inside the table. For that, please remove the Shortcode parameter for the FixedHeader from the Shortcode again and instead add

    [table id=123 datatables_scrolly=400px /]

    That pixel value then defines the height of the container in which you can vertically scroll the table.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fixed header column width shift’ is closed to new replies.