WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Fluid, responsive, resize? (4 posts)

  1. scottdaris
    Member
    Posted 1 year ago #

    I've searched and tried others' suggestions to make the table resize automatically by adding "width: auto" on the table id, as well as surrounding it with a div that is either "width: auto", "max-width: 100%; height: auto", and even "width: Xpx" but nothing is having any effect on the table width and it overflows into the sidebar regardless. What is worse is that the table is also not resizing with the content container it is within, making it the only item on the page that is completely unresponsive. I've made sure my CSS is in em so it scales proportionately, too, but nothing is working. Please help, if you'd be so kind. I've also donated in the past :)
    http://pandaperio.com/pp2/integrated-products-panda/

    (the table is after the 3-column logos on the above page)

    Scott

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Scott,

    thanks for your post, and sorry for the trouble.

    Well, the problem here is a general issue about how tables behave in websites. By default, it is not the outer size of the table that determines the size of the inner contents and elements, but it is the other way around. The content in the cells requires a minimum width, as text and/or images require a minimum width. For text, this is especially important, as for example long words will not be word-wrapped automatically. Thus, the longest word in a cell usually defines that cell's minimum width. Additionally, each cell usually has padding and margin, which is added to that minimum width. And with that, the sum of all minimum widths of all columns determines the minimum width of the table. Setting the width of a table to something smaller does then not work. There's no easy and reliable way around this (or at least, I'm not aware of one).

    So, from what I can see, you already seem to have deployed one solution: Reducing the font size and the padding. The other solution would be to reduce the amount of content, i.e. to remove a column, but that's probably not an option.

    Now about responsiveness: Small screens offer less available width, but the table requires a minimum width. The question is: What do you expect the browser to do? And there, the logical result is that the table overflows...
    Now, for TablePress, there's another idea that I have recently implemented in a so-called TablePress Extension. Please see http://tablepress.org/extensions/responsive-tables/ for more. This extension will use some CSS code, wrapped in media queries to basically flip the table to the side on small screens and add a horizontal scrolling feature. Maybe that a solution for your table as well...

    Regards,
    Tobias

  3. scottdaris
    Member
    Posted 1 year ago #

    Thanks, Tobias! I'll give your extension a try. And I appreciate your explanation about tables and their quirky properties in the world of html.

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem. You are very welcome!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic