[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

as always (from your previous posts), VERY helpful!!

Thanks so much for a great plugin and super-fast support!

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

that bold thing was an oversight on my part. I copied and pasted it from the plugin options section and THAT was bolded. today is not my day for code!

Hi,

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

Best wishes,
Tobias

While I have you, can you see any reason why the rows are not alternating colors and the mouse-over highlight of the rows is now working? I have both checked in the options?

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

Something I meant to ask you last week as well… (perhaps I should start another thread?)
my client wants to have those “yes” rows show up first when someone “sorts” on the respective column. Since the default sort is alphabetical, the “Y” in yes is lower than a blank.
Is there any way to have the first sort be “reverse” so the “Yes’s” show up first??

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

Thanks for that!! I spent some time on the doc. site as well looking at other options. Whenever I add code into that section, it stops allowing the sorting function for the whole table. i’ve tried even limiting it to a single column
{ "asSorting": [ "desc", "asc" ], "aTargets": [ 5 ] }
but it still stops all sorting.

I’m going to keep reading, but I must be missing something simple.

Hi,

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

Regards,
Tobias

all set… sorry about that.
i left my last revision in.

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

Simply Perfect!!!

I’m currently taking classes on javascript and jquery. Hope to get a better handle on these things in the next few months.

Thank you again for all your help!!

Hi,

very cool! ?? Thanks for the confirmation!

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

Best wishes,
Tobias