Using Fixed Column for 2 columns – header not aligned with rows

  • Resolved climbingtrees

    (@climbingtrees)


    7 years, 8 months ago

    I’m using the Fixed Column add-on plugin and would like to keep 2 columns fixed. I’m using the shortcode:

    [table id=6 datatables_fixedcolumns_left_columns=2 datatables_fixedcolumns_right_columns=0 /]

    I have “Use the following features of the DataTables JavaScript library with this table” enabled/checked.

    The issue is that for the 2 fixed columns, the header column borders are not aligned with the rows underneath. The headers have 2 lines of text in the first column whereas the rest of the table data is one line.

    Is there CSS to align the border between the first 2 columns’ header and rows?

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter climbingtrees

    (@climbingtrees)

    7 years, 8 months ago

    1. Referring to the first tab – the divider in the header between columns 1 and 2 don’t line up with the rows beneath.

    2. In the 2nd tab – the entire horizontal scrolling is misaligned between the header and rows.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 8 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    I’m not exactly sure, but it’s possible that this is caused by the tables being in such tabs. Unfortunately, the DataTables JS library has problems properly calculating the column widths of such tables, as they are initially hidden (and therefore don’t have a width).
    Can you maybe try this again with tables outside of tabs?

    Regards,
    Tobias

    Thread Starter climbingtrees

    (@climbingtrees)

    7 years, 8 months ago

    Thanks for your help – with the tables outside of tabs, the scrolling is fixed on the 2nd table, but the column headers are still misaligned on both – I’ve put all 3 versions on the site at the same link.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 8 months ago

    Hi,

    that’s strange then. To be honest, I have no real idea why this is happening then 🙁 I can only assume that the external library’s JavaScript code somehow has a problem with the widths here. Unfortunately, as I’m not the developer of this code, I don’t know its details enough though 🙁 Sorry that I can’t help with a solution here.

    Regards,
    Tobias

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

The topic ‘Using Fixed Column for 2 columns – header not aligned with rows’ is closed to new replies.