Fixed column messes up layout

rvlak

Recently, I installed the TablePress plugin and DataTables FixedColumns extension om my Wordpress website. Now when I set the first column of my table to ‘fixed’ with the relevant shortcode, the layout of my table is messed up: a part of the first column is showing up halfway underneath the first column and the column headers do not align correctly with their respective columns anymore. See this screenshot.

Tobias, the developer of the plugin referred me to this forum: "I see what you mean, but unfortunately, I also don’t have a clue about what’s wrong here. I can only assume that the FixedColumns JS code (or its foundation, the DataTables JS library) has problems calculating the correct column widths, maybe due to some CSS conflict. You could maybe try asking in the DataTables forums at https://www.datatables.net/ as the people there have more experience with things like this."

Does anyone have a clue how to fix this?

The table can be found here: https://mvokieswijzer.presss.nl/ (login with demo, demo). It is embedded in the page with shortcode [table id=4 datatables_fixedcolumns_left_columns=1 /]

I have tried debugging the table (there are no javascript errors), switching to a default Wordpress theme (no effect), disabling all other plugins (no effect), as well as removing the images and hyperlinks from the first row of the table and disabling all custom CSS (no effect). Whatever I do, the column headers do not align with the rest of the content. By the way, similar issues appear when I use the scroll or collapse mode of the Responsive Tables extension, both on my development and staging sites. Only when I do not use FixedColumns or Responsive Tables, the table is being displayed correctly.

Please check out these screenshots for more info:

1. Original table on staging site demo.somo.nl with Siteorigin North theme.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZ4cb1C2iaYyR38Mg
2. Bug with fixed left column in Siteorigin North.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZvEDOfWJk6rtzXBg
3. Bug with fixed left column in Twenty Sixteen.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZwPz7JiwF05yYikw
4. Bug with fixed left column in Twenty Sixteen – no other plugins.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZxDGe5BGnYE88EPA
5. Bug with fixed left column in Twenty Sixteen – no logo’s.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZyt4sPUa6_Ewkqyw
6. Bug with fixed left column in Twenty Sixteen – no logo’s, no hyperlinks.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZzVO6XYRcyktTH4A
7. Bug with fixed left column in Twenty Sixteen – no logo’s, no hyperlinks, minimal css.png – https://1drv.ms/i/s!An9V_kOPpd0MhbZ0AncKY8Ya0yexuw