Column Width – Custom CSS Not working? :(

I found that the data I had within the table had some hidden width data. I’ve got around it by downloading and uploading as a CSV rather than HTML import.

Hi,

thanks for your question, and sorry for the trouble.

The main problem here is that you are having very long URLs in that second column. These are treated as one very long word, and the browser does not add word wrapping to them, by default.

To enable that, you could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-2 .column-2 {
    width: 300px;
    word-break: break-word;
}

Regards,
Tobias

Hi TobiasBG, I am in the same boat as anthuntley. I have a table with 4 columns and one is huge, and the 4th is really small. I tried using the custom css, as described in the FAQ for this plugin, but none of it is working.

I would provide you the link to the page where this rather unwieldy table is located, but the site isn’t live. If you could send me an email to [email protected], I would be glad to give you a login to the back-end of our WordPress, so you could peek into my site and tell me what is going on. And I would be happy to provide a donation.

Thank you!

Hi,

as you have opened a new thread at https://www.ads-software.com/support/topic/custom-css-isnt-working-for-column-width/ as well, let’s handle the discussion there ??

Regards,
Tobias

Cannot change column width. All the solutions I am reading do not work.

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hello
Have been using WordPress for less than a week and testing different things. I have created a form using TablePress. It has only two columns and it looked good to start with: The first column had the width required for the pictures (350 px) and nothing extra. Then I wanted to test another template (Orfeo) but didn’t like it so switched back to Flexia. Now the first column has a width which is nearly 3 times as much as required. I have inserted the following code (copied from this thread) in the Custom CSS fields under Plugin Options for TablePress and saved. I don’t know many times I have gone back and saved but the width of the first column will not change. I have closed the tab where the table appears and opened in new tab, I have restarted the computer. It is as if Orfeo wrote something in a parameter which Flexia doesn’t read. Or I have misunderstood the code: But I have only one table

.tablepress-id-1 .column-1 {
width: 360px;
}

Regards,
Windman

Hi,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Here is the link:
https://bakcex.org/?page_id=21

Thanks!

Oh,

I just saw the error my self! The two bottom pictures are too big; not 350 px

Sorry for the trouble

Regards,

Andreas

Hi,

indeed, that might have caused it. Everything is 350px for me now as well ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hello,

I’m having the same problem as anthuntley. I want to expand the size of my 4th column but have a URL in the 6th column of my table (https://www.oregonworldwaterday.org/events/) that seems to be messing things up. I implemented the CSS suggestion from the second comment above and it only made the 4th column more narrow than it was. Ideas?

Hi,

thanks for your post, and sorry for the trouble.

From what I can see, that command is actually working. The URLs are broken up, so that the URL column is smaller.
In the long run, you will only achieve good results if you turn the URLs into clickable links with a short link text, in my opinion.

Regards,
Tobias

I’m in the same boat as everyone. Screamed at my laptop for a bit and was tempted to throw it at a wall. Here is the link of the page I need help with https://www.centrengo.org/find-funding/ column 2 width needs to be bigger/column need to be wrapped. Column 1 can be small but my top priority is column 2. Help

Hi,

thanks for your post, and sorry for the trouble.

The cause for this are some of the logo images in column 1. For example, the logos in row 21 and 22 have been added in full size. This means that the column will stretch so wide that these images fit.
You should either limit the size of these images, or maybe use CSS code to make them smaller. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-2 .column-1 img {
  width: 200px;
  height: auto;
}

Regards,
Tobias