“Freeze Pane” First Columnn

Hi,

thanks for your post, and sorry for the trouble.

For this, please take a look at the TablePress Extension from https://tablepress.org/extensions/datatables-fixedcolumns/

Regards,
Tobias

Thank you Tobias!

I do have another issue. Please view the attached links to see the table before and after the extension. When applying the extension, the first columns header is removed.

Also, is there a way to change the color of the links in the first column? Just the links, not the entire first column’s text.

Before:
https://andrewlundy.org/client-images/BeforeExtension.png

After:
https://andrewlundy.org/client-images/AfterExtension.png

Hi,

good to hear that this helps!

Regarding the header cell problem and link question: Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Just screenshots are not enough here. Thanks!

Regards,
Tobias

https://eathappycle.com/happy-hours-specials/

Hi,

are you sure that the FixedColumns Extension is activated for the table on that page? It doesn’t seem like it?!

Regards,
Tobias

Ah! That’s my fault Tobias! I took it off to show the client the progress I made. I’ve re-enabled it! Again, my bad!

Hi,

thanks!

It seems that this is somehow caused by the width of column 1. The column is actually wide than what we see (due to the content in it requiring more space). Can you therefore please remove all CSS that affects the width of that column?

And for the link color: How about this CSS?:

.tablepress a {
	color: #ffffff;
}

Regards,
Tobias

Tobias,

Thank you.

Though this works, it reduces the width of the columns. I’ve added the following CSS

.blueTable .column-3,
.blueTable .column-4,
.blueTable .column-5,
.blueTable .column-6,
.blueTable .column-7,
.blueTable .column-8,
.blueTable .column-9 {
  width: 800px;
}

Yet it doesn’t affect it. It only affects it when I set the actual table width to something, like 2800px. But, when doing this, it clashes with the ‘sticky’ column.

Any ideas on what I can do? I can give you my entire CSS if needed.

Hi,

no need to give me the CSS, I can see it in the page ??

Unfortunately, changing column widths on tables that can scroll is usually not working well ?? I can therefore only suggest trying to set everything up without such CSS as much as possible.
Also, it’s kind of strange, in my opinion, that you are using an “Extra CSS class” called “blueTable” when the table is not actually blue?

Regards,
Tobias

• This reply was modified 6 years, 5 months ago by Tobias B?thge.

Yes, it was blue initially, but the client changed his mind on the colors. So once we figure out how to use both plugins correctly, I’ll go back and change it. If there is no way to change the width of the columns, then what’s the point in the scrolling extension? If I add a column, it just makes the other ones smaller and compresses it into what seems like a div that has a max-width. But this is nowhere to be found in the CSS.

Is there a way to make this table bigger at all without CSS? I don’t see it in the plugin options.

• This reply was modified 6 years, 5 months ago by andrewlundy.

Hi,

ah, thanks for the explanation on the CSS class. That makes sense.

Regarding the width: I hear you, but this is nothing that I can really influence, but simply the behavior of the browser. They don’t want content to be too wide (and they don’t know that we’ll make it scrollable).
Now, it might work to set the width with a higher priority in the CSS like

.tablepress-id-123 .column-4 {
  width: 400px !important;
}

But before we do that, we should get the fixed column to work with the default widths (which the browser determines based on the content in the columns).

Regards,
Tobias

Tobias!

So close man!

https://eathappycle.com/happy-hours-specials/

I’ve got the sticky column working, and the width of the columns are all good. But that title still isn’t showing on #1. I’ve taken out any CSS that effects the width. Any other ideas? Thanks your help by the way.

Hi,

it seems like the text centering is affecting this (because the cell is actually wider than it looks). Would it be ok to left-align that cell (and increase the padding on the left), e.g. via

.tablepress-id-3 thead .column-1 {
  text-align: left;
  padding-left: 50px;
}

?

Regards,
Tobias

Yes! Thank you! I just noticed the sticky panel has a scroll bar at the bottom, is this normal?

Hi,

good question… I have no clue where that’s coming from, sorry ??

Regards,
Tobias