Setting column width based on content

  • Resolved barrettj12

    (@barrettj12)


    7 years, 2 months ago

    Is there any way I can set the width of the column to exactly fit the content inside it? I am aware of using the custom CSS to set a column to a fixed width (e.g. https://tablepress.org/faq/column-widths/), but how can one set the width dynamically based on the cell contents?

    • This topic was modified 7 years, 2 months ago by barrettj12.

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    7 years, 2 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    The table is actually trying to do that. How exactly would you like the table to look on this page, i.e. where do you think that the widths are “wrong”?

    Regards,
    Tobias

    Thread Starter barrettj12

    (@barrettj12)

    7 years, 2 months ago

    Hi Tobias,

    Currently it looks decent because I have had to manually set the column widths using CSS. However, my concern is that this will not scale to different font sizes, different browsers, etc. I have now disabled those CSS options, and you can see that most of the columns take up far more width than they need.

    What I am asking is: can I ensure that a column takes up only the space it needs, and no more? E.g. using a CSS option such as width: fit-content does not seem to work. Also, is it true that TablePress columns don’t support the CSS min-width parameter?

    • This reply was modified 7 years, 2 months ago by barrettj12.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 2 months ago

    Hi,

    thanks! Now I see what you mean. Please try this CSS:

    .tablepress {
  table-layout: auto;
}

    to override a theme CSS setting.

    I don’t have experience with width: fit-content;, but you could definitely try it. Note that tables in HTML are somewhat special, due to their fixed row/column structure, so that not all CSS changes are always possible. Something similar might be the case for the min-width parameter. TablePress itself does not have an influence on this, as this is all regular HTML/CSS behavior for tables that comes into play here.

    Regards,
    Tobias

    Thread Starter barrettj12

    (@barrettj12)

    7 years, 2 months ago

    Thanks! That works great. I will note to others that you can also use the option white-space: nowrap to avoid line breaks in the cell.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 2 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!
    Yes, preventing line breaks like that is also an option, of course!

    Best wishes,
    Tobias

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

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

The topic ‘Setting column width based on content’ is closed to new replies.