Mobile Responsive table header not aligned

Resolved Bryan Morgan
(@bmorgan12)

10 years, 10 months ago

Tobias,
I have installed the latest version of your tablepress plugin along with the mobile responsive plugin. You can visit the link I have attached, I have the same table there twice, the first one is without the mobile shortcode, the second one is with the tablet shortcode.
[table id=3 /]
[table id=3 responsive=”tablet” /]
You can see in the second table that when the table header is moved over to the side on a smaller screen size that column 1 (the header) does not align with the rest of the rows in the table. I have tested this on Firefox and Safari, I have enabled and disabled table scrolling and had CSS on and off where I have placed some code to control column width. I have also played around with the text in the header row with all of the text being 1 single line and also placing character returns after each word thinking it would allow the table to handle the long text in different ways.

Thanks in advance for the help, I have submitted 1 previous question and you were super helpful. Thanks for your contributions to WordPress

http://wordpress.org/extend/plugins/tablepress/

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

Plugin Author TobiasBg
(@tobiasbg)

10 years, 10 months ago

Hi Bryan,

thanks for your post, and sorry for the trouble.

From what I can see, you have enabled the “Horizontal scrolling” on this table. Unfortunately, that can lead to problems with the Responsive Tables Extension. Could you therefore please turn that off for this table, by unchecking the corresponding checkbox on the “Edit” screen?

Regards,
Tobias

Thread Starter Bryan Morgan
(@bmorgan12)

10 years, 10 months ago

I have turned off the horizontal scrolling and you can see on the second iteration of the table which is set with the tablet shortcode there is still a alignment issue that exists between the blue header row and the remainder of the table.
Plugin Author TobiasBg
(@tobiasbg)

10 years, 10 months ago
Hi,

that’s good! That shows the header next to the rows now.

The remaining alignment issue is indeed a result of the different height of the cells. In the responsive mode, the regular cells do not know what height the header cells on the left have, and therefore, their height doesn’t match. To fix this, you could set a fixed height for the responsive mode of this table, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen:
```
@media (max-width: 979px) {
  .tablepress-responsive-tablet.tablepress-id-3 thead tr,
  .tablepress-responsive-tablet.tablepress-id-3 thead th,
  .tablepress-responsive-tablet.tablepress-id-3 tbody td {
    height: 60px;
  }
}
```
Regards,
Tobias

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

The topic ‘Mobile Responsive table header not aligned’ is closed to new replies.

Tags