Support » Plugin: WP-Table Reloaded » [Plugin: WP-Table Reloaded] tablepress column width

  • Resolved jrobie23

    (@jrobie23)


    have tried column width in the “reloaded” and now in tablepress with zero results.

    would love some insight. (perhaps it is my ignorance of proper css?)

    this is the page: http://deeringlumber.com/contractor-referrals/
    this is the code: .wp-table-reloaded-id-5 .column-1 { width: 75px!important;}

    although I must admit, i’ve been through all the support and faqs and have tried nearly every iteration you have suggested, all to no avail.

    i don’t really care about the actual width at this point. I have tried 10px and 200px inside of firebug and it works fine with the “element.style” selector. just nothing seems to work with the above code.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    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?

    Plugin Author TobiasBg

    (@tobiasbg)

    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??

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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!!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    very cool! 🙂 Thanks for the confirmation!

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

    Best wishes,
    Tobias

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Plugin: WP-Table Reloaded] tablepress column width’ is closed to new replies.