Table cell with nowrap overflows
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
The cause and the workaround
btn-group will result a correct layout, so I started to examine what actually the btn-group does. btn s 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... 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 . 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>
你也可以使用另一个
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Read futher information this link
table { table-layout:fixed; width:100%; }
Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:
div { width: 0; min-width: 100%; }
The main trick is giving the width something other than auto/percent, and using a min-width of 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; }
下一篇: 带有now overflow溢出的表单元