Topic: Bypass element page width settings for table

Jakub252
November 10, 2024 at 7:18 am

Hi, I have an element that sets the page width of all pages to 720p. Now I have a couple of tables with more columns that could use more space. Not all tables are the problem, only the ones with more columns. Is there a way to bypass the page width setting of the element for only specific tables?
Alvind
November 10, 2024 at 7:42 pm
Hi there,

You can use CSS to achieve that. We just need to know the specific page to target using the page ID. For example, on the page you shared, you can use this CSS to adjust the width:
```
body.page-id-3091 #content {
   max-width: 1300px;
}
```
Jakub252
November 12, 2024 at 4:28 am

Hi thank you, but isn’t there a way to only do this for the table? The thing is I do want everything else to be max width 720px, I just want the table to be wider.
David
November 12, 2024 at 6:34 am
Hi there,

you could use some CSS like so:
```
@media(min-width: 1000px) {
   .is-wider {
        width: 1000px;
        margin-left: calc( ( ( 1000px - 720px ) / 2 )  * -1 );
    } 
}
```
Then give the parent blocks whose width you want to be wider a CSS Class of: is-wider

Note the min-width, width and calc values all include 1000px which is what the block will be forced to. Change all 3 values to adust that width

Jakub252

November 17, 2024 at 3:17 pm

Thank you for trying to help, I could not make the CSS work by applying it to the table in the end. But if someone else will have a similar issue this is the best I could figure out.

/* Wider table for large tables */
.entry-content .WiderTable {
    margin-left: -180px;
    width: 1100px;
    max-width: none;
    overflow-x: auto;
}
@media (max-width: 1024px) {
    .entry-content .WiderTable {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
	overflow-x: scroll;
    }
}	
@media (max-width: 768px) {
    .entry-content .WiderTable {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
	overflow-x: scroll;
    }
}

The only issue with it is that the table can only be set to 100% on mobile, otherwise it affects the total page width.

David
November 18, 2024 at 7:57 am

Glad to hear you found a solution.
Di you resolve he mobile issue too ?
Jakub252
November 20, 2024 at 4:56 am
I did not, if you have any suggestions on how to make the table scrollable on mobile, while being wider and not enlarging the total width of the page that would be great. Basically, exactly how it is right now but with the table being wider.

What I tried that worked to some extent was adding “white-space: nowrap;” like this
```
@media (max-width: 768px) {
    .entry-content .WiderTable {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
    }
```
But the problem with it was that it made the table extremely wide with no restrictions. (setting specific width instead of 100% did not help in my experience)

There could maybe also be a way to do it by putting the table in a container but I would rather avoid having tables in div containers because of the search engines.
David
November 20, 2024 at 7:18 am
Ok. So keeping your existing CSS you could add something like this to it:
```
figure.WiderTable table {
    width: 800px;
}
figure.WiderTable table td {
    width: 20%;
}
```
Here we force the table element to. fixed with and set each of the divisions to a % of that.

Alternatively you can just do:
```
figure.WiderTable table td {
    width: 160px;
}
```
To set them all to the same width.
Jakub252
November 20, 2024 at 1:05 pm

Amazing, this did exactly what I wanted it to do.

Thanks a lot for the help.
David
November 21, 2024 at 7:06 am

Glad to be of help!

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Bypass element page width settings for table