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;
}

Answer 1

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 .