Topic: Table alignment

Arpad
April 23, 2024 at 1:47 pm

Hi,

I’ve created a post which shows a table in the link below. (positioned about halfway through the post)
There are 2 elements I would like to adjust.

1. How can I display the text in the first row vertically and centred?

2. Whilst the table looks good on the PC, it doesn’t look good on a mobile. At the moment the columns have a fixed width. On itself that is not a problem, but how can I adjust the layout settings such that a scroll bar is shown such that the reader can scroll to the right or left to read the content, rather than the text inside a cell being stretched out in an attempt to fit it within the fixed column width?

3. How can I define/set each column width individually?

4. Any other advice you can give me to improve the layout on the mobile?

Thanks,
Arpad.
Ying
April 23, 2024 at 2:19 pm
Hi there,

Just so you know, GP does not have control over the table block, it’s a WP core block, it’s managed by WP.

For question 1, I’m not sure I understand the question, do you want something like this?
https://app.screencast.com/YaeLyI37TAHsr

For question 2, table element is not responsive by default, and hard to make it responsive. There should be plugins offer better table blocks, might worth looking into it.

For question 3, I’m not sure as it’s not our product, but I don’t think there’s an option for it in the WP table.

For question 4, if you decide to use WP table, here’s CSS to make it scroll on mobile, the CSS sets the table to be at least 800px, the overflow part can be scrolled to see.
```
table {
    min-width: 800px;
    overflow-x: scroll;
}
```
Arpad
April 23, 2024 at 2:51 pm

Thanks Ying,

I’d like the first row to look like this: https://imgur.com/a/XBsXj80

Thanks for the CSS. That works.

Sorry, I didn’t know the table element was a WP block. So how would you suggest creating tables? Would it be through GP container blocks stacking them up as a grid or would you recommend using a plugin?

Kind regards,
Arpad.
Ying
April 23, 2024 at 3:15 pm
For question 1, try this CSS:
```
table tr:first-child td {
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
}
```
I don’t use table, because it’s hard to use.

GB container is not very easy to use to create table like elements as well, if you have to use table, I would recommend using a specific table plugin, here some popular ones: TablePress, Responsive Tables, Ninja Tables

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Table alignment