带有nowrap溢出的表格单元格

Question

我正在使用bootstrap,并且想要创建一个简单的HTML table,在最后一列中我有一个2按钮组和一个单独的按钮.我希望这最后一个单元始终将这3个按钮保持在一行中,所以我添加了text-nowrapbootstrap类(这很简单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

• 我已经更新了bootply,链接是以前的版本,抱歉
• 在最新的Chrome和IE测试中,两者的问题几乎相同.

原因和解决方法

• 我已经意识到从展开的两个按钮展开btn-group会产生正确的布局,所以我开始检查它实际上是btn-group做什么的.
• 我发现它中的btns btn-group是浮动的,这种浮动会导致错误的布局.添加一个clearfix类来btn-group解决问题. 不,它实际上没有,仍在研究......
• 我将研究为什么float: left需要bootstrap,看起来组中的按钮可以通过纯粹inline-block没有边距来对齐.我将在v4-alpha代码中检查这一点,并将此问题报告给bootstrap v3.

Answer 1

阅读此链接的更多信息

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

而不是使用表格布局：固定；对于你的表，你可以使用这个技巧让 DIV 始终占据 TD 的完整空间，并具有以下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; }