Column Width Weird In Spite Of CSS

Hi,

thanks for your question, and sorry for the trouble.

The reason for this is that you are using ID-based CSS selectors but with the names of the class-based selectors. Please try again with

/* Breite von Spalte 1 */
.tablepress-id-3 .column-1 {
  width: 400px;
}

/* Breite von Spalte 2 */
.tablepress-id-3 .column-2 {
  width: 20px;
}

/* Breite von Spalte 3 */
.tablepress-id-3 .column-3 {
  width: 20px;
}

(If you want to continue using the ID-based selector, that would be #tablepress-3 instead of #tablepress-id-3 here.)

Regards,
Tobias

Hi,

correct, the smallest width is determined by the widest text in the cells of a column (because the browser will not add word-wrapping automatically).

And yes, the preview is looking differently in many cases (as explained in the short introduction text above the table there), because the preview does not use the theme CSS, which can also contain commands that affect tables.

Can you maybe post a link to the page with the table where this problem happens, so that I can take a direct look? Maybe I can make some suggestons.

Regards,
Tobias

Hi,

thanks for the link! One idea here would be to reduce the padding (inner white space) in the cells, which is set rather big by the theme. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.entry-content .tablepress-id-3 thead th,
.entry-content .tablepress-id-3 tbody td {
  padding: 8px;
}

Regards,
Tobias

Hi,

the CSS worked, so that’s good. As you can see, the words in the header row are now much closer together. To make more columns fit, you will now either have to reduce the font size in the table, e.g. with

.tablepress-id-3 th,
.tablepress-id-3 td {
  font-size: 12px;
}

or add manual hyphenation or line breaks to the long words like “Salzinhalator” or “Raumluftreiniger”,
or increase the overall width of the table, for which you will have to increase the content area in the theme (which currently is 960px wide). For that, you could check if the theme maybe offers a “Full page” page template on the “Edit” screen of the page.

Additionally, I suggest to switch to a different type of horizontal scrolling. For that, please uncheck the “Use DataTables” checkbox on the table’s “Edit” screen and instead apply the approach from https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954

Regards,
Tobias

Hi,

ok, they are basically also suggesting to reduce the font size and padding the cells.
For the problem with the header row, I suggest to change

.tablepress thead th {
  font-size: 11px;
  margin: 0 !important;
  max-width: 98px;
  padding: 0 !important;
}

to

.tablepress thead th {
  font-size: 11px;
  max-width: 98px;
  padding: 5px 0 !important;
}

I see what you mean with “Produkt / Nutzen”, but I don’t have an idea here, except maybe that you use an image instead, that has a 45º line in it or something. Just with text, we can’t really achieve that.

Regards,
Tobias

Hi,

ah, I actually forgot to add a line that I wanted to add, sorry… The other two changes are just some cleanup. Please try again with

.tablepress thead th {
  font-size: 11px;
  max-width: 98px;
  padding: 5px 0 !important;
  line-height: normal;
}

Regards,
Tobias

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

Best wishes,
Tobias

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