Table Width

Hi,

I’m working on a site for a client and he’d like the table to be smaller. I’ve read all the postings, but I don’t see where in my table I would provide the ID for that table.

Can you help me out? Page is https://www.massproductions.net/wordpress/prices/

I assume I’d probably need to change the font size for the tables too. Would that be done with Spans or in the Custom CSS?

Thank you,
Ric

Hi Ric,

thanks for your question.

From what I can see on the page in your link, you are not using TablePress to create these tables, but some other plugin.
Therefore, the methods that you have read about here in this thread do not apply, as those only influence and work with tables that were generated by TablePress.

To change the width of your tables, you should try the support for the plugin that you used for them.

Regards,
Tobias

Thanks Tobias.

Unfortunately the theme creator isn’t the most responsive person.

Do you recommend using the standard table plugin instead?

Hi,

yes, if the theme author is not responding, you should consider looking for another solution.
There’s no “standard table plugin” though, but there are a few available, and TablePress is just one of them.

Regards,
Tobias

Hi Tobias–

I’m trying to create image map tables and I just can’t get it to work properly. I run Weaver II theme with a 640 width and split sidebars. No matter what I do, the table wants to expand itself and run under the right sidebar. I’ve tried adding CSS code to change this but nothing I do works.

I’m not good with CSS, but here’s what I’ve added:

.tablepress-id-2 td img {
border: none;
padding: 0;
margin-bottom: 0;
}

.tablepress .column {
padding: 0;
}

.tablepress .column {
width: 20px;
}

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

.tablepress-id-2 .column-1 {
padding: 0;
}

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

.tablepress-id-2 .column-2 {
padding: 0;
}

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

.tablepress-id-2 .column-3 {
padding: 0;
}

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

.tablepress-id-2 .column-4 {
padding: 0;
}

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

.tablepress-id-2 .column-5 {
padding: 0;
}

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

.tablepress-id-2 .column-6 {
padding: 0;
}

But on the actual page the sixth column still insists on running under the right sidebar and all of my commands about column width and padding are ignored. I use Firefox as my browser.

My images are all only 60px wide and there are 6 of them, so they should be able to fit into a 640px width with space left over, but there’s just too much padding and the table is resizing itself to be larger than 640px. I can only see 5 of the 6 columns as a result.

I’m pretty not good at this. Can you help me? =/

The test page I’m using is: https://www.animetoynews.com/tablepress-test/

Also, what CSS code can I use to manipulate all tables at once instead of just one?

Hi,

thanks for your question, and sorry for the trouble!

The reason for this is your theme’s CSS that also influences tables.

To change this, please
1. Remove all “Custom CSS” in TablePress that you have now.
2. Replace it with only this:

#content .tablepress tr td img {
  border: none;
  margin: 0 auto;
  padding: 0;
}
#content .tablepress tr td {
  padding: 8px;
}

Regards,
Tobias

Hi TobiasBg

what a great plugin you have there. Love it.

My problem is getting the table widths reduced. I have applied this but still no luck. They are spanning right across in Chrome.
https://www.gcsb.com.au/wp/?page_id=55

.tablepress .column-2 {
width: 80px;
padding: 4px;
}
.tablepress .column-1 {
width: 80px;
padding: 4px;

Hi,

thanks for your post, and sorry for the trouble.

First of all, can you clarify which of the two tables is causing trouble? They don’t span to the right for me…

Also, there’s a big problem: As it seems, you have been editing the file “default.min.css” directly (and also added other text besides CSS code there). Please do not do that, and reverse those changes! You will otherwise lose them after a plugin update of TablePress (due to the way how plugin updates work in WordPress). All changes to the default CSS must go into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress. They will then be saved in an extra file that will be kept during a plugin update.

Regards,
Tobias

Thanks Tobias,

It really does not matter which table as I can not control either or any table width. Originally I wanted to apply it for all the tables but did not work. Is table width is table ID specific?

Regarding CSS changes, I’ll do that but still risky as I do not have it as a local copy. I will make a copy locally now just incase.

Faruk

Another question regarding table width is , is it possible to define more than one table ID without entering .tablepress-id-56, .tablepress-id-57, .tablepress-id-58 etc in the same class.

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

like ??
.tablepress-id-55, 57, 68, 59 .column-2 {
width: 80px;
}

Hi,

you still have text in the default.min.css that does not belong there. Please replace all of those files with a fresh download!
(And keeping a local backup of the “Custom CSS” is of course a good idea!)

Now, about combining the CSS code: Yes, that’s possible, but you’ll have to copy the entire selector, i.e. try

.tablepress-id-55 .column-2,
.tablepress-id-57 .column-2,
.tablepress-id-68 .column-2,
.tablepress-id-59 .column-2 {
  width: 80px;
}

Regards,
Tobias

Thanks again. I have uploaded the new default.min.css.

This also worked for me. Thank you for your help. It is an amazing plugin as I can use for many things and it is sooo logical how you create, edit, add and delete cells tables etc. Only one thing is missing is adding inline css from a formatting icons menu. I know I can do this manually but it would be great for my clients who has no idea about opening tags and closing tags.

Text here etc

.tablepress-id-55,
.tablepress-id-56,
.tablepress-id-57,
.tablepress-id-58,
.tablepress-id-59,
.tablepress-id-60,
.tablepress-id-61,
.column-2 {
width: 80px;
}

<strong>Text here etc

Hi,

adding “inline CSS” is indeed only possible manually, but adding HTML tags like <strong> is easily done in the “Advanced Editor”. You’ll see a small toolbar there with buttons for this.

Regards,
Tobias

I got soo frustrated with adjusting each individual tables/cells I ended up placing a 1pixel image with zero height with required width seems to be working.

I find it totally illogical that I can not adjust cells regardless of their content. Some content has more text but only 30pixel wide column ??

You can see the page I am working on now , there are 4 tables on the page.
Table ‘OPTIONS 1 – ELECTIVE UNITS’ has been adjusted with 1pxel trick but the last table ‘OPTIONS 2 – ELECTIVE UNITS’ has not been adjusted with the 1 pixel.

But its so messy so I am taking it out now

Now both has the same CSS options applied with exact same width but they look different ?? it is really soo frustating

Here is the page
https://www.gcsb.com.au/wp/?page_id=39