Responsive Column Header Setting Problem – Fix / Suggestion

Please forward this to your developers of this plugin

Condition
Creating a table, where the last row, or last few rows are “merged” and comments or text notes are placed into the merged rows.

Header / Column Titles Setting
When setting a table with the following in the global settings, along with the “responsive” setting for the table,

Main - Table Elements - Header (checked) / Count of Header Rows - 1

This creates a responsive table where the column header titles will move to a left vertical column in line with the data at the right.

The method you currently use is creating the vertical column of header titles by using the “:before” pseudo-selector.

Problem
With the above settings, the table is responsive and the header titles of the columns are laid vertically which aligns with the data cells at the right, but, the merged cells will also show the same header title when it shouldn’t.

See screenshot example:

Since these merged cells seem to show only to the first column title, then that column title is what shows at the left for each merged cell/row as the screenshot shows.

Suggestion/Fix
This is something that really needs to be fixed for a next update, because this problem really kills the usability of the plugin.

This cannot be fixed by us using Custom CSS, because the cell ID is always different depending on the size and use of each table.

For the developers of this plugin, the fix is rather simple which can apply to any table globally. Here is the suggested fix,

Fix
For each row that has merged cells spanning the entire table, a special class name is assigned to that row, which is done by either PHP or Jquery script that inserts a specific class name into the HTML TD tag.

Example:
The row is assigned a class name “noBefore” and inserted via a script.

Your main CSS will then use,

.noBefore::before {
display: none;
}

Then, the padding of the rows has to change to bring the row back to a merged state spanning the entire table. Since your current CSS adds a lot of left side padding to the current layout. Removal of that padding must occur. – but it can only occur to the cells affected, so targeting the specific rows as follows,

table.oneColumnWithLabels td.noBefore {
padding-left: 0;
}

The CSS “table.oneColumnWithLabels td” is what adds the padding to allow space between the left column header titles (“:before” pseudo elements) and the data information.

This will fix this issue and this responsive layout would be perfect.

• This topic was modified 6 years, 7 months ago by mwarbinek. Reason: fixed formatting-layout
• This topic was modified 6 years, 7 months ago by mwarbinek. Reason: same
• This topic was modified 6 years, 7 months ago by mwarbinek. Reason: changed image link
• This topic was modified 6 years, 7 months ago by mwarbinek. Reason: fixed image link
• This topic was modified 6 years, 7 months ago by mwarbinek. Reason: added request