带有now overflow溢出的表单元
我使用bootstrap，并且想创建一个简单的HTML table ，最后一列中有一个2按钮组和一个单独的按钮。 我希望最后一个单元总是将这3个按钮放在一行中，所以我添加了text-nowrap bootstrap类（这是一个简单white-space: nowrap ）。
如果其他单元格的内容足够长，最后一个单元格的内容会水平溢出，我不明白为什么。 我期望表格的其余部分将缩小以为非包装单元格留出空间。
这里是一个重现问题的演示：bootply
这是标记。
<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>
按钮组div和单独的button都是inline-block元素，所以包装应该按照预期的IMO工作。 我究竟做错了什么？
也许这与bootstrap没有严格的关系。
UPDATE
原因和解决方法
btn-group的两个按钮会产生正确的布局，所以我开始研究btn-group实际上做了些什么。 btn的以s btn-group是浮动的，而这种浮动造成不良布局。 向btn-group添加一个clearfix类解决了这个问题。 不，实际上没有，仍在研究... float: left ，看起来组中的按钮似乎可以通过使用纯边缘inline-block对齐。 我将在v4-alpha代码中检查这一点，并将此问题报告给bootstrap v3 。 <table class="table">将填充其容器的100％宽度。 列宽度按其内容的宽度成比例分配。
当左侧声称较大的部分时，按钮列会“短”。
当左侧的部分较小时，按钮列将变大，从而使按钮“向中心移动”。
解决方法：将右手柱的宽度设置为固定值。 所有三个按钮的总宽度的总和： width:125px 。 如下所示：
<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>
请参阅：http：//www.bootply.com/PGL6xCDgMz
这会将按钮列的宽度设置为125px的固定值。 所以左边的列将剩下剩下的部分。
更新1 :(根据提问者的评论）
- 技术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>
- 技术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;
}
阅读更多信息这个链接
table { table-layout:fixed; width:100%; }
而不是使用表格布局：固定; 对于你的表格，你可以使用这个技巧来让DIV总是占据TD text-overflow: ellipsis;的全部空间text-overflow: ellipsis; 功能：
div { width: 0; min-width: 100%; }
主要的技巧是给出的宽度不是auto / percent，而是使用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; }