Table max width

Hi,

thanks for your question.

The reason for this is the (kind of) weird HTML markup and CSS on the site. All paragraphs and heading (and via the “Custom CSS” that you added all tables) have a left margin or padding. A better way should be to apply this as a padding to the surrounding container, as that would fix this.

We can fix this with the current state, too, though. The problem is that the tables are set to have a width of 100%. When then margin is added to that, the tables will just extend. So, the fix is to set their width to the desired width of the content area. In your case, this means, to just extend the “Custom CSS”

.tablepress {
	padding: 0;
	margin: 16px 32px 16px 32px;
}

to

.tablepress {
	width: 680px;
	padding: 0;
	margin: 16px 32px 16px 32px;
}

As a side note: I noticed some CSS that you are using to hide the <caption> element in a table. My assumption is that you are doing this to hide the “Edit” link? Then this CSS is not actually necessary, as regular site visitors will never see the link. Only user who are logged-in to WordPress and who are allowed to edit that table can see that link.

Regards,
Tobias

Thanks a lot! I’ll talk to our CSS guy.. he should optimize the code to avoid future problems.

Yes, the “Edit” is disabled because we don’t like to see it. It would be nice to disable it with some plugin options and not css. Maybe in the future.

Thanks and have a great sunday!

Hi,

well, your CSS isn’t really a “problem”, but let’s say that there are easier ways of handling things.

Oh, and I forgot one thing: Your table uses the “colspan” feature to combine cells. Unfortunately, a table like that is then not compatible with the JavaScript library that adds the sorting and filtering functionalty. This is (at least for me) raising a JavaScript error message. You should therefore uncheck the “Use DataTables” checkbox on the “Edit” screens of a all tables that use colspan or rowspan.

About the “Edit” link: There’s a TablePress Extension that can do this (without CSS). Please see https://tablepress.org/extensions/remove-edit-link/ for the download and instructions.

Regards,
Tobias