Suppress button wrap in button group after fitting cell width dynamically

Question

According to MetalFrog's answer to this problem I'm trying to fit a cell width to its content:

tr td.fit {
width: 1%;
white-space: nowrap;
}

This works pretty well as seen here (jsfiddle). However by adding a twitter-bootstrap button group to a cell that should fit the width to its content the buttons will wrap down between them still. jsfiddle.

How can I prevent my buttons to get wrapped down? I still want to keep them in one line.

EDIT I want to keep the table width 100%, so removing 1% width of the cell is not a solution. Also removing the float from bootstrap's .btn-group > .btn will bring space between my buttons as long as there is space between the label tags, even unwanted but acceptable.

Answer 1

Adding this css decleration will fix any issues with table cells wrapping button groups.

.btn-group {
  display: flex;
}

Explanation: This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. By default, flex items will all try to fit onto one line.

Answer 2

REVISED ANSWER:

The inline-block solution is kind of gross -- restoring the font-size is dodgy b/c you can't say "inherit from two levels up", you have to explicitly set it.

Today I would use flexbox, which would enable eliminating the empty space between items:

.btn-group {display: flex;}

...as another user answered. To elaborate: using display: flex works b/c the default values for flex-related properties flex-direction (default "row" means horizontal flow), justify-content (default "flex-start" means items are packed toward the beginning of the row), and flex-wrap (default "nowrap") fulfill the use case.

---

OLD ANSWER:

Use display: inline-block on the buttons. A side effect of this is that ANY whitespace between in the markup will render as visible space between the buttons, so you have to do this little trick with font-size:

.btn-group {
  white-space: nowrap; 
  font-size: 0; // inline-block will show ALL whitespace between elements, so shrink it!
}

.btn-group .btn {
  display: inline-block;
  font-size: 14px; // restore font-size to whatever you are using for button text.
  float: none;
  clear: none;
}

Note that this does not work with IE7 and older. Support is pretty good otherwise: http://caniuse.com/#search=inline-block

Also, to be responsive to varying device form factors, you might want to come up with an alternate component that just wraps more elegantly than .btn-group .

Answer 3

I know this may be old but here is the solution I came to.

I added the btn-group-justified class and a set width to the btn-group-DIV. I just set the width as wide as I needed for both buttons to fit their content.

<td class="fit"  >
    <div class="btn-group btn-group-justified" style="width:136px">
         <a href="#" class="btn btn-second">Accept</a>
         <a href="#" class="btn btn-highlight">Deny</a>
    </div>
</td>

If your buttons are created statically this will work fine but if they are being generated dynamically you could use javascript to set the width of the btn-group to either the sum of the width of the children, or by multiplying the largest button width by the number of children.