Table exceeding max width

  • Resolved ghaskamin

    (@ghaskamin)


    12 years ago

    First of all, I just want to thank you for a brilliant plugin. Does its job incredibly well and has more features than I could possibly think of for working with tables.

    Now to my problem. Some of the tables I created contains quite a lot of information and I haven’t found a good way to reduce it. This means that the columns exceed the max-width I have set on the table in total and makes it stick out over the area it’s supposed to be on.

    I’ve been looking at different ways to solve it with CSS somehow and found that it kind of helps by setting table-layout: fixed. However, instead of the table itself being too wide, the content in each cell flows over into the other cells. Hiding the overflow won’t help either and I haven’t found a way to make the words wrap properly to make that solution work. It also seems to mess up the design of some of my other tables.

    Now, my thought was that a possible solution would be to wrap the whole table in a div, let the table be as wide as it wants and instead set the overflow to allow for horizontal scrolling within that div. It’s quite a makeshift solution, but would work for the site I’m working on.

    This in itself shouldn’t be hard for me to implement myself if it were only one or a few tables, but the website I’m working on is containing a fairly big amount of tables and it’s just too much work to do manually.

    Unless you know of another, simpler solution to my problem, would it be fair to ask if you could add an option in the plugin settings to wrap the tables in a div with a .tablepress-wrapper class or something similar? I’m sure this could be useful for other purposes too.

    One benefit I can thing of if doing this would be to make it a lot easier to style the position of the whole table (including description text and title) in relation to the rest of the page content without having to manually edit margins for both header, description and the table itself.

    Before I make my own plugin to wrap the tables created by Tablepress, I thought I would simply ask you about it. Perhaps there are downsides to this method that I haven’t thought about, but that’s also why I want it to be an option so it doesn’t accidentally mess up the design of other people’s tables.

    I realize I wrote more than I had first intended, so thanks for reading and keep up the good work on the plugin!

    Regards,
    Patrik

    https://wordpress.org/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Something like this is indeed possible, and doesn’t require much code. For details, please see this thread: https://wordpress.org/support/topic/adding-class-to-table-name-and-description

    With that code, you can add a wrapper div to all tables and use some overflow magic in that to make the table scrollable.

    Regards,
    Tobias

    Thread Starter ghaskamin

    (@ghaskamin)

    12 years ago

    Thanks for your quick reply! I tried to search for a similar post, but missed that one. I actually already put together a similar filter hook, but did not think of the possibility to include the custom css class for the table. That’s a very neat solution and I guess I’ll just make my own little extension out of it.

    Anyway, after taking the time to write this post, I went back and took a look at the tables in question and realized there is in fact a better way I can represent the information than I had thought of before. The person creating the content (and tables) for the website did not think of how to present it, which makes it a bit hard for me sometimes.

    In some cases I have no clue how to keep the information intact while still presenting it well, but at the same time I don’t feel like I can just leave it like he put it together either. One of the many problems of being a web developer 😉

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years ago

    Hi,

    yes, adding the “Extra CSS classes” to the wrapper can also be helpful for some use cases. Good to hear that this piece of code will get you started 🙂

    And I totally understand your problems 🙂 Tables are not the best solution for everything, but as they are rather easy to use, many people will just use tables instead of thinking about other ways to structure their content.

    Best wishes,
    Tobias

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

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Table exceeding max width’ is closed to new replies.