Nowrap overflow table cell

Question

I am using bootstrap and want to create a simple HTML table where in the last column I have a group with two buttons and a separate separate button. I want this last cell to always save these 3 buttons on the same line, so I added the text-nowrap bootstrap class (which is simple white-space: nowrap ).

If the contents of the other cell (s) are long enough, the contents of the last cell will overflow horizontally, and I do not understand why. I expect the rest of the table to shrink to make room for a cell without a wrapper.

Here is a demo to reproduce the problem: 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> 

A group of div buttons and a separate button are all inline-block elements, so the wrapper should work as expected by IMO. What am I doing wrong?

This may not be related to the download.

UPDATE

• I updated bootply, the link was the previous version, sorry
• Tested in recent versions of Chrome and IE, the problem is almost the same in both.

Reason and workaround

• I realized that btn-group two buttons from btn-group would lead to the correct layout, so I started to learn what btn-group actually does.
• I found that btn in btn-group floating, and this floating causes a bad layout. Adding the clearfix class to btn-group solves the problem. No, this is not really happening, still exploring ...
• I will examine why float: left needed for bootstrapping; it seems that the buttons in a group can be aligned using a purely inline-block without a field. I will check this in v4-alpha code and also report this problem in bootstrap v3 .

Answer 1

<table class="table"> fill 100% of the width of the container. The width of the column is divided in proportion to the width of its contents.

When the left side requires most, the button column will be "short."

When the left side has a smaller part, the button column will increase, thereby making the buttons "move to the center".

To solve: Set the width of the right column with a fixed value. The total value of the combined width of all three buttons: width:125px . As 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 button column width to a fixed value of 125 pixels. Thus, the left column will leave the rest of the remaining part.

Update 1: (according to commentator comments)

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

Read more info this link

 table { table-layout:fixed; width:100%; } 

Instead of using table-layout: fixed; for your table, you can use this trick to get a DIV, to always occupy the full TD space using the text-overflow: ellipsis; function text-overflow: ellipsis; :

 div { width: 0; min-width: 100%; } 

The main trick gives the width something other than auto / percent, and using min-width 100%;

  div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.myTable { width: 100%; border-collapse: collapse; } td { border: 1px solid #000; } td.td1 { width: 100%; min-width: 50px; } td.td2 { width: 100px; min-width: 100px; } td.td3 { width: 150px; min-width: 150px; } td.td4 { width: 50%; min-width: 50px; } td.td5 { width: 50%; min-width: 50px; } td.td6 { width: 150px; min-width: 150px; } 

Answer 3

 // Try It table { table-layout:fixed; width:100%; } 

Answer 4

You can also use one more

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

Answer 5

Here is the updated Demo

 /* CSS used here will be applied after bootstrap.css */ tr{ background-color: yellow; display: flex !important; } tr .text{ flex: 3 } tr .buttons{ flex: 1; } 

 <div style="width: 500px;"> <table class="table table-striped"> <tbody> <tr style="background-color: blue;"> <td class="text">Test text Test text Test text Test textTest text Test textTest text Test text</td> <td class="text-nowrap buttons"> <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> 

Note Styles on buttons are not displayed in this code, since they are from bootstrap. But will work in a demo