Table Width

Hi,

thanks for your question, and sorry for the trouble.

Please try adding this “Custom CSS”:

.entry-content .tablepress {
    width: auto;
    margin: 0 auto 1em;
}

That will basically tell the browser to use the widths for the columns as the table width, opposed to the table always stretching to full width.

Regards,
Tobias

Hi Tobias,

Thanks for the quick response- of course it fixed the problem! My new problem is I don’t want any of the text in cells to wrap – how is that accomplished?

Thank you again!

Cindy

Hi Tobias,

Never mind, I figured it out!

All of my WP posts are going to have one of two table format options. Is my only choice to define one of the two choices (as just .tablepress) in Custom CSS and define any tables using the second choice as its own table ID in Custom CSS? Or is there a way to define two different table styles in CSS?

Thanks,

Cindy

I have just gone into the table and on the first row I simply reduced the length of the text by hitting the return so the width is now where I need it to be. Apparently the text was effecting the width of the column, possibly because I copied the text from a website and pasted it in.

Had to be some formatting issue I would guess. Now I can play with the code again and see if that works.

Hi,

@lesquealer: You could use “Extra CSS classes” for this. For example, create “tablepress-styling-1” and “tablepress-styling-2” (or whatever name you want) and paste this class into each table’s “Extra CSS classes” field, on the “Edit” screen. Then, you can use these CSS classes in your CSS, without having to use the ID based CSS selectors.

@lenrapp:
Your code

.tablepress-id-12 .column-1 {
  padding: 100px;
}

doesn’t really make sense. The padding is the inner white space in a cell, i.e. the space between the text in the cell and the cell edge. Setting this to a high value would influence the column width, but in the desired way. For that, you’d simply use the width property, like
width: 100px;
The width does however indeed depend on the text in the cells. That is, the text in the cell, especially the long words, define the minimum column width.

Regards,
Tobias

Yes, I see that the text determined the width of the column’s. I have it set correctly now, but the extra css didn’t really do anything, I tried a number of different settings with no change. I will remove that extra code now since it look OK now.

Thanks again…

Len

Hi Len,

sure, no problem!

Best wishes,
Tobias

Tobias
I am having trouble setting my column widths as well. I am using WPRocket and it does some minifying and concantating (sp) SO I have done some file cleaning in my wp-content and downloaded and then deleted the files related to tablepress and I have cleared the cache to this plugin.

I have the following in the Custom CSS in the Plugin Options section:

.tablepress-id-2 th,
.tablepress-id-2 td {
border-left: 1px solid #cccccc;
}

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

.tablepress-id-2 .column-2 {
width: 100px;
}

I do now hat least have a vertical border so the first part of the CSS seems to be working.

Here is my page: https://chuckbarnes.com/locations/turquoise-place-condos-orange-beach-chuck-barnes-realtor/

Thanks in advance for any assistance
Sincerely CB

Hi Chuck,

ok, and what exactly do you want to change now? It seems that the table is already smaller now, as you reduced the overall table width to 50%?

If you want to control it via per-column commands only, please set the table width to
width: auto;
(where you now have the 50%).

Regards,
Tobias

Hi Tobias

I have some size problems too, and searched several size-related topics on this forum.
I have created a test table on this page :
https://www.leschambresdesdames.com/partenaires/
(see table in page bottom)

This table should be 600 px wide, with 2 columns 300 px each.
I’ve tried several CSS directives in the Options screen to set this, but none of them works: the table expands to full page width.
By the way, the height of the 1st row is also incorrect: the meteo widget should have 185 px height and is truncated.
Could it be due to the meteo widget and/or the google map?
Or Theme (Suffusion) behavior?

Here is the CSS :

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

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

.tablepress-id-3 .row-1 {
height: 200px;
}

I’m using firefox and tried to inspect the code, but I can’t see these CSS instructions in the code. It seems they are ignored (Please note that I’ve created another table with its CSS instructions and it works perfectly).

Thank you in advance for your support

Hi,

thanks for your question, and sorry for the trouble.

In addition to what you already have, please try adding this CSS:

.entry .tablepress-id-3 {
    width: auto;
}

Regards,
Tobias

Thanks a lot for your quick answer!

It works fine! Still having problems with the height of the meteo widget, but your tip is an interesting clue.

Thanks again for your support!

Hi,

to fix this a little bit, you could also add

.tablepress-id-3 .column-2 div br {
    display: none;
}

However, the remaining white space is caused by the CSS inside the widget, which we can not influence from the outside ??

Regards,
Tobias

Well, this is nearly perfect!
A small truncation remains in the bottom of the widget, but it’s not visible.
As it stands, it will be OK.

Thanks for all your help.

B.C.

Hi,

I might have found something to fix that:

.tablepress-id-3 .column-2 div.normal {
    height: auto !important;
}

Regards,
Tobias