Table Width

Hi Grant,

thanks for your question.

Please post the link to the table in question, and I will try to make suggestions.
Note, that it’s not always possible to make a table fit, e.g. if the contents in the cell simply require a certain minimum width, due to their own width.

Regards,
Tobias

Hi Tobias

It seems to work fine in internet explorer but not in firefox
https://www.wellandhealthy.com

Thanks
Grant

Hi,

thanks for the link.

It works for me in Chrome, but you are right, in Firefox, it causes trouble.
To fix that, I suggest that you remove the padding, margin, and border around images in tables. To do that, please add

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

to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Regards,
Tobias

Thanks Tobias,

That has reduced the spread slightly on Firefox. I may try and reduce the size of the graphics so they fit in properly.

Thanks for you help.

Regards
Grant

Hi Grant,

ah, my bad, there’s a typo in my code above. “none” for the padding should be “0”. I fixed that in my code above. Please try that again.
Additionally, please remove all the other “Custom CSS” that you already have (to the set the column and table widths), as is not used anyway, due to the size of the images.
Your “Custom CSS” should be

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

and nothing else. You should then not have to reduce the image size by hand.

Regards,
Tobias

Hi Tobias

Thanks brilliant, it works fine now.

Exellent support!!

Regards
Grant

Hi Grant,

awesome, great to hear that this worked ?? Thanks for the confirmation.

Best wishes,
Tobias

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

Hi Tobias,

I have migrated from WP-Table-Reloaded to TablePress and it’s generally working fine for me. I’ve been able to change the column widths of this table but overall the table is still wider than I want it to be:
https://www.themarketingquiz.com/retirement-plans

How can I make the table’s width equal (or very close to) the sum of the two column widths?

Also, I would like to add a 1px border to the whole table and (if possible) give each column its own color instead of each row.

I searched the plugin’s FAQ and Documentation but have not found these answers . . . so thanks in advance for your help.

Hi,

thanks for your question.

At first, you’ll want to disable the usage of the JavaScript library, by unchecking the “Use DataTables” checkbox on the table’s “Edit” screen, instead of just unchecking the individual features.
After that, you can use this “Custom CSS” to make the table smaller, i.e. to make it as wide as its contents:

.tablepress-id-1 {
  width: auto;
}

To add a border around the cells, you can use

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
  border: 1px solid #333333;
}

In order to give colors to the columns and not the row, you should at first decide, whether you want to use the “Alternating row colors” feature, as that makes things more complicated here.
If you don’t want it, just uncheck the corresponsing checkbox on the “Edit” screen. Then you can use this “Custom CSS”

.tablepress-id-1 .column-1 {
  background-color: #ff0000;
}
.tablepress-id-1 .column-2 {
  background-color: #00ff00;
}

Regards,
Tobias

Thank you, Tobias! Those CSS snippets certainly help. However, even after adding the first one you gave, only the first (L-hand) column in the table is the width I specified in this snippet:

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

The second column seems to be collapsing to the width of the longest line of text in it. For that reason I have inserted a string of periods (…………) to make the table the width I want it to be. But there must be a better way than this to get that table width (can you tell me what it is?):
https://www.themarketingquiz.com/retirement-plans/

Hi Jim,

the column width of the second column is not changing because of the second part of the CSS has the wrong table ID, 2 instead of 1 ??
Please try again with

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

With that, you won’t need the .....

Regards,
Tobias

What a kind fellow you are . . . and how foolish I feel for (once AGAIN) not noticing the obvious! Yes, changing that one character made all the difference. Thank you Tobias, you certainly embody the spirit of this forum:

Hi,

no problem, you are very welcome! And don’t worry, these small things happen to me all the time ??
Oh, and thanks for the song! ??

Best wishes,
Tobias

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

Hi Tobias,

I’ve read through the advice you’ve given the other members on here and implemented that in to my ‘Custom CSS’ field but the table width still hasn’t adjusted and is clashing with my sidebar widgets. The website i’m working with is conference-call-providers.co.uk and i’m testing it on Firefox. The table is on the main page. (it’s working fine with all other browsers)

Any help greatly appreciated

p.s – my id is table2 as well and i’ve also changed that with no luck.

Thanks
Arran

Hi Arran,

thanks for your post.

One reason for this might be how the Shortcode is inserted in the page. You probably used the Visual Editor. That unfortunately has the bad habit to make the HTML code to complex. Please switch to the “Text editor” tab on the page’s “Edit” screen in the admin area, and check if the [table ...] Shortcode is on its own line, with an empty line before and after it.

Then, it also appears that Firefox does not add a line break/word wrap in the “DIAL-OUT?” column, while other browsers do. Thus, please add a line break after the hyphen in that cell, manually, by just pressing “Enter” there.

Regards,
Tobias