带有 nowrap 溢出的表格单元格

Question

我正在使用引导程序，并想创建一个简单的 HTML table，在最后一列中，我有一个 2 按钮组和一个单独的按钮。我希望最后一个单元格始终将这 3 个按钮保持在一行中，因此我添加了 text-nowrap 引导类（这是一个简单的 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 工作。我做错了什么？

也许这与引导程序并不严格相关。

更新

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

原因和解决方法

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

Answer 1

<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

这会将按钮列的宽度设置为 125 像素的固定值。所以左边的列将得到剩下的任何部分。

更新 1：（根据提问者 cmets）

- 技巧 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>

Answer 2

你也可以使用另一个

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

Answer 3

阅读更多信息this link

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

而不是使用表格布局：固定；对于您的表，您可以使用此技巧让 DIV 始终占用具有 text-overflow: ellipsis; 功能的 TD 的全部空间：

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

主要技巧是为宽度提供除自动/百分比以外的其他值，并使用 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 4

这里是更新的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>

注意：按钮上的样式不会反映在给定的代码中，因为它们来自引导程序。但将在 Demo

中工作

Answer 5

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