Table Width

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Katie,

no, sorry, that link won’t work. It has to be a published post/page, as a non-logged-in user can not view the “Edit” screen of a post or its preview.

Regards,
Tobias

Hi,

thanks! One reason for this might be that the use of the DataTables JS library is turned on, while its individual features are turned off.
Can you therefore please try again after turning off the “Use DataTables” checkbox on the “Edit” screen of this table?

Regards,
Tobias

Hi Katie,

thanks! Now I see what’s happening. Basically, your theme is giving non-text items (like big images or tables) a bigger width than the text. It does so by adding a margin to the text paragraphs.
If you want, you can do the same to tables, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
  max-width: 1024px;
  margin: 0 auto;
}

Regards,
Tobias

Hi,

“row width”? Isn’t that the same as the table width? Can you maybe clarify what you mean with that?

For the table head row background color, please see https://tablepress.org/faq/change-background-color-table-head-row/

Regards,
Tobias

Hi,

ah, ok 🙂 To reduce that, you can reduce the padding (inner white space) in the table cells, e.g. with

.tablepress th,
.tablepress td {
  padding: 4px;
}

In my opinion, this is not really necessary for your tables, though, as it would only reduce readability.

Regards,
Tobias

Hi,

sure, by e.g. extending that code to

.tablepress th,
.tablepress td {
  padding: 4px;
  text-align: center;
}

Regards,
Tobias

Hi,

another change to

.tablepress th,
.tablepress td {
  padding: 4px;
  text-align: center;
  border: 1px solid #cccccc;
}

should work, but similarly to narrow rows, they are seen to be reducing readability.

Regards,
Tobias