[Plugin: WP-Table Reloaded] tablepress column width

Hi,

thanks for your post, and sorry for the trouble.

The correct code to change the column width in TablePress would be

.tablepress-id-5 .column-1 {
  width: 75px !important;
}

However, that’s not really going to help in your case. The reason is, that you have data in your table that requires rather big column widths. And as a column can not be made smaller than its largest/widest word, tables with many column are hard to style.

To “combat” this, TablePress enables users to use a “Horizontal Scrolling” feature in such tables. This is already activated in your table, but not yet useful.
I’d like to sugget that you try it out by adding this “Custom CSS”:

.tablepress-id-5 td {
  white-space: nowrap;
}

After that, you can horizontally scroll the table on the screen, and thus keep all columns.

Another solution could be to decrease the font size in this table, with

.tablepress-id-5 {
  font-size: 12px;
}

Regards,
Tobias

Hi,

no problem, you are very welcome! 🙂

By the way: Your table content was bold initially, because the Shortcode is part of an HTML <strong> tag.
I suggest that you remove that, as the code will be cleaner (and you won’t need the extra font-weight: normal; in the CSS). The best way to do this is to temporarily switch from the “Visual” to the “HTML” tab in the editor on the editing screen of that page.
The Shortcode should basically stand on its own line, with an empty line in front of that.

Best wishes,
Tobias

Hi,

don’t worry 🙂 It was nothing severe, but still it’s nice to have clean HTML markup there 🙂

Best wishes,
Tobias

Hi,

ah, indeed. This comes from some CSS code in your theme that interferes with these.
Just add

div.post .tablepress td {
  background-color: transparent;
  border-top: none;
}

to the “Custom CSS” and both features should be working again. The colors appear a little light though, with the dark border of the cells (which also comes from your theme). Therefore, I also added a line to make the default border visible. Just remove that line again, if you prefer the dark border.

(Note that the div.post is just necessary in this case, to fix that conflict with the theme. All other TablePress “Custom CSS” should not need it.)

Regards,
Tobias

Hi,

yes, that is possible with a “Custom Command” for the DataTables JS library (which performs this sorting). Please try adding

{ "asSorting": [ "desc", "asc" ], "aTargets": [ 5, 6, 7, 8, 9 ] }

to the “Custom Commands” textfield in the “DataTables JavaScript Features” section on the “Edit” screen of your table.
The 5, 6, 7, 8, 9 indicate that this shall apply to columns 6, 7, 8, 9, 10 (counting starts zero-based here).

Regards,
Tobias

Hi,

can you keep the code in there, so that I can check?

Regards,
Tobias

Hi,

thanks. I just checked the docs again, and actually I made a mistake. Sorry about that…
Please try again with

"aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ 5, 6, 7, 8, 9 ] } ]

Regards,
Tobias

Hi,

very cool! 🙂 Thanks for the confirmation!

And have fun in your classes! This is definitely a cool topic!

Best wishes,
Tobias