Table cell with nowrap overflows

Question

I'm using bootstrap, and want to create a simple HTML table, where in the last column I have a 2-button group and a single separate button. I want this last cell to always keep this 3 buttons in one line, so I added the text-nowrap bootstrap class (which is a simple white-space: nowrap).

If the content of the other cell(s) is long enough, the content of the last cell will overflow horizontally, and I don't understand why. I'd expect that the rest of the table will shrink to make space for the non-wrapping cell.

Here is a demo to reproduce the issue: bootply

Here is the markup.

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap">
        <div class="btn-group">
          <button class="btn btn-default"><span>A</span></button>
          <button class="btn btn-warning"><span>B</span></button>
        </div>
        <button class="btn btn-success"><span>C</span></button>
      </td>
    </tr>
  </tbody></table>
</div>

The button group div and the separate button are all inline-block elements, so the wrapping should work as expected IMO. What am I doing wrong?

Maybe this is not strictly related to bootstrap.

UPDATE

• I've updated the bootply, the link was a previous version, sorry
• Tested in latest Chrome and IE, the issue is almost the same in both.

The cause and the workaround

• I've realized that unwrapping the two buttons from the btn-group will result a correct layout, so I started to examine what actually the btn-group does.
• I've found that the btns in the btn-group are floated, and this floating causes the bad layout. Adding a clearfix class to the btn-group solves the issue. No it actually doesn't, still researching...
• I will examine why the float: left is needed for bootstrap, it seems like the buttons in the group could be aligned by using purely inline-block without margin. I will check this in the v4-alpha code, and will also report this issue to bootstrap v3.

Answer 1

The <table class="table"> will fill 100% width of it's container. Column width are divided proportionally to the width of it's content.

When the left hand side claim bigger portion, the button column will fall "short".

When the left hand side has smaller portion, the buttons column will grow larger, thus making the buttons "move toward the center".

To solve: Set the width of the right hand colum with a fixed value. A total value of combined width of all three buttons: width:125px. As shown below:

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap" style="width:125px;">
        <div class="btn-group">
          <button class="btn btn-default"><span>A</span></button>
          <button class="btn btn-warning"><span>B</span></button>
        </div>
        <button class="btn btn-success"><span>C</span></button>
      </td>
    </tr>
  </tbody></table>
</div>

See: http://www.bootply.com/PGL6xCDgMz

This will set the width of the button column to a fixed value of 125px. So the left hand column will get the rest of any portion left.

Update 1: (according to questioner comments)

- technique 1:

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td><button class="btn btn-default"><span>A</span></button></td>
            <td><button class="btn btn-warning"><span>B</span></button></td>
            <td><button class="btn btn-success"><span>C</span></button></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody></table>
</div>

- technique 2:

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td><button class="btn btn-default"><span>A</span></button></td>
      <td><button class="btn btn-warning"><span>B</span></button></td>
      <td><button class="btn btn-success"><span>C</span></button></td>
    </tr>
  </tbody></table>
</div>

Answer 2

You Can Use Another One Also

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}