Twitter Bootstrap Question posted in

Force cell to "clear" contents in bootstrap thumbnail table – Twitter bootstrap

I have generated a table that is displayed within a “container” and “thumbnail” div in the twitter bootstrap framework. One of the cells contains buttons that I would like to be displayed on a single line, so there are within a <nobr> tag. The issue is that the “button” images extend beyond the limits of the table. Is there an easy fix?

Demo here: http://www.bootply.com/ElSeqdESoO#

The fix should use dynamic column widths (other columns should wrap there contents, preventing the final column from extending beyond the table boundary).

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution, not necessarily compatible with all browsers, using CSS flexible boxes. I added the following attribute to the <nobr> tag:

    style="display:flex; flex-shrink: 0; min-width:60px;"

    This causes the icons to be wrapped in a flexbox which is also prevented from shrinking beyond 60px.


  2. 0

    It seems like the last column not having enough width. Providing, you wouldn’t mind to have equal width of the columns (any number), add this to css.

    table{ table-layout: fixed; }

    Best regards

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search