Table Width

Hi,

Thanks, i’ve inserted the shortcode in the ‘Text editor’ tab and it’s on it’s separate line and i’ve added the line break after the hyphen. The line break has changed the width but it’s just a tad too long.

I’m wondering if the CSS in my theme is overriding the CSS in the Tablepress plugin? On Firefox i’ve right clicked on the table and clicked on the ‘Inspect Element’ tab and it seems if i cancel out everything from Tablepress nothing changes, so i’m wondering if the Pagelines theme is causing the problem? I’ve tested it on the default WordPress 2012 theme and in Firefox the table width is fine…

Thanks
Arran

Also just checked, it looks like the first two columns are being stretched, as the images look stretched compared to when you look in Chrome and Safari. Is there a way to adjust a particular column width?

Hi,

thanks for doing that! That helped already, and the HTML is already nicer ??

Well, your theme is defining the width of the images, indeed. But it’s using relative (percentage) values, so that’s no problem. Apparently, Firefox doesn’t use that freedom to make the widths smaller, but chooses to increase the table width.
The best way should thus indeed be to simply set a fixed width for that column. This is possible with “Custom CSS”, as described in the TablePress FAQ. In your case, please try

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

Regards,
Tobias

Yeah I figured out another way of doing it which could be of some help to other people. The image width for the ‘conference now’ and ‘conference genie’ were set to 120px by 20px (the width being 120px) In Chrome it automatically resized the images down to around 70px thus making the images smaller. However, in Firefox this didn’t seem to be the case so these two images were increasing the size of the column.

So to fix it all I did was resized the two images to how they appear in Chrome and that sorted it. Quick fix ??

Thanks for your help and quick response Tobias!

Arran

Hi Arran,

ah, yes, you are right, it was just that one image, actually. I guess Firefox gives precedence to the width attribute then, compared to the CSS command.

Great to hear that this is fixed now ??

Best wishes,
Tobias

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

Hi Tobias, I’m back because I’m trying to add borders to 2 tables on another site (different than the one with which you helped me earlier). Those tables are at:
https://www.jimhinckley.com/cibco/transactions and
https://www.jimhinckley.com/cibco/services

The table on transactions has an ID of 1, so I assume that all its CSS should include .tablepress-id-1. The other table has an ID of 2, so all its CSS should include .tablepress-id-2. Correct?

The strange thing is, each time I try to make one table’s CSS consistent for its table ID, it seems to change the CSS for the other table. That is, when I go thru table #1’s CSS, making sure that .tablepress-id ends with 1 (and then click Save), I switch over to the CSS for table #2 and find that all of its instances of .tablepress-id have changed to end with 1.

Very weird (to me, at least) . . . any suggestions?

Hi Jim,

I have a feeling that you are misinterpreting things here: There’s not one “Custom CSS” textarea for each individual table, but only one common/global “Custom CSS” textarea that holds the CSS code for all tables at once.

Your assumption about the table IDs in the CSS code is totally right. You’ll now just have to put it into the “Custom CSS” textarea twice, i.e. once for each table.

Do you know what I mean?

Regards,
Tobias

Ehhhhh . . . wow, you’re right, I did misunderstand that (usually I slap my own forehead only ONCE a week!). No wonder I was seeing what I did after every table edit. Thank you!!!

Hi Jim,

no problem ??

Best wishes,
Tobias

Hi Tobias,
how are you?
I’m a former user of wp-table reloaded
Well my problem is also related with table size. See my problem here
https://autismodiario.org/2011/12/13/medicacion-y-autismo-revision-sistematica/
I try all the tips for control the size of table
Using the CSS like
Restric the length of each column (7 columns in total)
.tablepress-id-16.column-1 {
width: 80px;
}

.tablepress-id-16.column-2 {
width: 80px;
}
…. up to column-7
The sze of my template are 640 px
Any trip to solve this?
Thnks a lot for the support

Hi,

thanks for your post. Good to hear that you switch from WP-Table Reloaded to TablePress.

From what I can see, the only chance to make this table fit is to reduce the font size.
First of all, your “Custom CSS” is not working, because the space between the 16 and the .column-... is missing. But even after fixing that, the width will not really change. The reason for this is that the long words in your table require this minimum width. For example, check the words
“antipsicóticos” in the first column,
“(Valoración” in the second column,
“comportamiento” in the third column,
“microgramos” in the fourth column,
“Demografía” in the fifth column,
“extrapiramidales” in the sixth column, and
“comportamientos” in the seventh column.
These are very long, but the browser can not add a line break there (i.e. word-wrap them). Due to that, these words define the minimum width of the columns. And those then define the minimum width of the table. This simply is how tables work in browsers…
And as the words are just so long, they require a minimum width that is bigger than 640px.

Therefore, the only chance to change this, is to either remove content from the table, which you probably don’t want to do, or to make the text size smaller. Additionally, you could make the padding between the cell border and the content smaller. So, please try this “Custom CSS” and remove the CSS code that you had for the widths:

.tablepress-id-16 th,
.tablepress-id-16 td {
  padding: 2px;
  font-size: 10px;
}

Regards,
Tobias

Works fine, thank you!!

Hi,

sure, no problem!
You are very welcome!

Best wishes,
Tobias

Hi Tobias, I figured out how to change both the background color and font color for a header row. But is it possible to change the background color of just ONE cell in a header row?

Here is the page I’m working on. I’d like to change the background color of the L-hand cell in the header.

Hi Jim,

yes, that’s possible. Please try this “Custom CSS” code:

.tablepress-id-1 thead .column-1 {
	background-color: #ffff00;
}

(When comparing this with your current CSS code, you’ll notice that the first line of the new code, the so-called “selector” is basically a combination of the selectors that you already know from the existing code: .tablepress-id-1 thead tells the browser to apply the background-color CSS command to the table head of table 1, while .column-1 makes this more specific, by telling the browser to actually only apply it to the first column.)

Regards,
Tobias