WordPress table header is not responsive (mobile)

dylanvz97
(@dylanvz97)

4 years, 9 months ago
Hi,

We have alot of trouble with tables in our wordpress posts. The tables look great on desktop, but on mobile the header of the table is not responsive.
We don’t want a table plugin, because we want to be able to make tables in the post itself.

How can we fix this?

Kind regards,

[ redundant link removed ]
- This topic was modified 4 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

corrinarusso
(@corrinarusso)

4 years, 9 months ago

See attached:
https://postimg.cc/FdsXrV8p

It seems your table headings are responsive.

Can you be more specific in what it is you are trying to fix?

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

I’m sorry we just tried to use a plugin to make them responsive, but that doesn’t look good for big tables. You should see the problem now in: https://www.brokerfind.nl/brokers-vergelijken/ on mobile

Kind regards, Dylan

corrinarusso
(@corrinarusso)

4 years, 9 months ago

Still looks mostly okay to me:
https://postimg.cc/yDwshGxb

Can you be more specific about what you prefer or expect?

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

The headers of the colums are not above the colums anymore. In bigger tables this looks really bad. Everything under the headers looks good, but the headers don’t move with the colums on mobile.

Thank you for looking at this!

Kind regards,
Dylan

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

Does anybody know how to fix this?

corrinarusso
(@corrinarusso)

4 years, 9 months ago

Hows this?
https://corrinaonline.com/tables/

Renders okay to me:
https://postimg.cc/FkvVF8dk

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

Is there maybe a way for the headers to be above the column text. We don’t understand why the column’s look fine but just the table header doesn’t move.

Like in your example: https://postlmg.cc/yDwshGxb

We just need to find a way to make the headers directly above the text like it should be.
I hope you understand what I mean.
Thanks alot for the help so far!

Kind regards, Dylan

corrinarusso
(@corrinarusso)

4 years, 9 months ago

Oh! Lol, well if that’s all you want to do then just adjust the width of your thead element to match the tbody. Pretty straight-forward.

See screenshot:
https://postimg.cc/MvbTMTHF

Include this in your thead:
display: table;
table-layout: initial!important;
width: 100%;

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

Where can we add this code? There is not a CSS option for the table in wordpress. Do we need to add this to appearance -> customize -> extra css?

We are complete beginners as you can tell ;).

Thanks for the help!

Kind regards
corrinarusso
(@corrinarusso)

4 years, 9 months ago
Customizer –> Additional CSS:
```
table thead {
 display: table;
 table-layout: initial!important;
 width: 100%;
}
```
Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

We added the code to our CSS. The problem still partly remains. If you look for example at: http://www.brokerfind.nl/bux-zero-review you can see that the last table still looks really bad on mobile devices. It seems like the column and the header are not seen as the same column or something?

corrinarusso
(@corrinarusso)

4 years, 9 months ago

You will need to be more specific re: “the last table”, and also what looks bad.

Also – turn off your Siteground cache while you are developing.

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

I made a screenshot: https://postimg.cc/236ZWB76

As you can see the check marks should be under the header ‘BUX Zero’. It feels like the headers and the colums don’t match each other on mobile.

Thread Starter dylanvz97
(@dylanvz97)

4 years, 9 months ago

After adding the code it also looks like this on desktop now:
https://postimg.cc/67rmCPwd
corrinarusso
(@corrinarusso)

4 years, 9 months ago
Remove this part:
display: table;

Customizer –> Additional CSS:
```
thead {
 table-layout: initial!important;
 width: 100%;
}
```

Viewing 15 replies - 1 through 15 (of 19 total)

1 2 →

The topic ‘WordPress table header is not responsive (mobile)’ is closed to new replies.

WordPress table header is not responsive (mobile)

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics