Tablepress: can't change columns width

Hi,

thanks for your question, 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!

Most likely, something like

.tablepress-id-123 th,
.tablepress-id-123 td {
  width: 50%;
}

will be the best choice here (where 123 is changed to the correct table ID).

Regards,
Tobias

Thanks.
I found another solution. I’m using this:

[table id=xx column_widths=”60%|40%” /]

.
Is it the same?

Well, now i’m facing a new problem.
I made a nice looking table ( https://prntscr.com/b7xtyo ) but when i switch to the mobile view, it’s cut-off on the right side. I installed your responsive table extension, it’s working but i’d like to know if there’s a way to get that kind of table on mobile: https://prntscr.com/b7xvs3
Do you have any solution?

Hi,

yes, that code is very similar, but it’s not the best technical solution.
Instead, you could use the CSS

.tablepress-id-xx .column-1 {
  width: 40%;
}
.tablepress-id-xx .column-2 {
  width: 60%;
}

Regarding responsiveness: The question is what you would like to happen on small screens. You could for example add horizontal scrolling (using the Extension) or maybe reduce the font size on small screens.

Regards,
Tobias

CSS is not working.
I’m using

.tablepress .column-1 {
width: 40% !important;
}

.tablepress .column-2 {
width: 60% !important;
}

and here’s what happens https://prntscr.com/b7yvzd

You can see it here: https://urlgone.com/00dfbf/

Hi,

can you maybe post that link to the page again? Unfortunately, it seems to have expired already.

Regards,
Tobias

I’m still on it.

I noticed the css is not working in the tablepress options but it’s working with the custom css in my theme options. Does it change something?

Btw, i’m using this code:

.entry table td, .entry table th {
padding: 4px;
}
.tablepress .column-1 {
width: 50%;
}
.tablepress .column-2 {
width: 50%;
}

I just wanted to make two 50% width columns and make the rows smaller. It’s working on my website but is it the good way to make this?
Thanks

Hi,

yes, this looks good. Note that this would however affect all TablePress tables. It might better to use the specific selectors for only specific table IDs, like

.entry table td, .entry table th {
  padding: 4px;
}
.tablepress-id-123 .column-1 {
  width: 50%;
}
.tablepress-id-123 .column-2 {
  width: 50%;
}

where 123 is the table ID.

Regards,
Tobias

Ok thank you!

Another question: i want to “vertical-align: middle” my content inside the rows but i can’t figure how. Can you help me?

Btw, i just left you a 5 star review. You deserve it.

Hi,

usually, applying that like

.tablepress-id-123 tbody td {
  vertical-align: middle;
}

is sufficient. Can you try that? If it’s not working, 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

Hi

I’m the same problem. I can’t change columns witdh. I’ve tried all above but doesn’t works. My table has 10 columns. Maybe is this the problem?

Yo can see at https://lnx.martinez.gonzalez.name/0-pruebas/

Can I do something

Regards

Lucio

Hi
Hi
Had the same issue, could not control column width with custom CSS
Workround as follows:

1. Uncheck setting: The first row of the table is the table header
2. Add the following CSS as custom CSS in Plugin Options to get table header look for the first row

.tablepress tr.row-1.odd td {
background: #c0def9 !important;
}

Hi Tobias,

I would like all my columns to be the same width, but the first column by default is far too wide. What can I so?
See link:
https://enviropesttech.com.au/services-2/

Thanks Sarha