Disable button wrapping in a button group after dynamically setting the cell width

Question

According to MetalFrog's answer to this problem, I am trying to set the width of a cell in its contents:

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

This works pretty well, as shown here (jsfiddle) . However, adding a group of twitter-bootstrap buttons to the cell, which should correspond to the width of its contents, the buttons will wrap between them. jsFiddle .

How can I prevent my buttons from being wrapped? I still want to keep them on the same line.

EDIT I want the table width to be 100%, so removing 1% of the cell width is not a solution. Also removing the float from bootstrap .btn-group > .btnwill lead to a space between my buttons until there is no space between the labels, even undesirable but acceptable.

Answer 1

Adding this css declaration will fix any problems with groups of table cell groups.

.btn-group {
  display: flex;
}

Explanation: This defines a flexible container; inline or block depending on the set value. This allows you to use a flexible context for all of his direct children. By default, flex items will try to fit on one line.

Answer 2

:

- b/c, " ", .

flexbox, :

.btn-group {display: flex;}

... . : display: flex b/c flex flex-direction ( "" ), justify-content ( "flex-start" , ) flex-wrap ( "nowrap" ) .

---

:

: . , , :

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

, IE7 . : http://caniuse.com/#search=inline-block

, - , , , .btn-group.

Answer 3

float, .  , 1% . , " ", .
. td 50%: http://jsfiddle.net/7zcHW/1/show

.btn-group > .btn, .btn-group-vertical > .btn {
    float: left;
    position: relative;
}

:

• .btn
• td.fit/set width / .

Answer 4

, , , .

btn-group-justified btn-group -DIV. , , .

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

, , , javascript, btn-group , .