html – 带有nowrap溢出的表格单元格

发布时间：2020-12-14 18:42:28 所属栏目：资源来源：网络整理

导读：我正在使用bootstrap,并且想要创建一个简单的 HTML表,在最后一列中我有一个2按钮组和一个单独的按钮.我希望这最后一个单元格始终将这3个按钮保持在一行中,所以我添加了text-nowrap引导类(这是一个简单的空白区域：nowrap). 如果其他单元格的内容足够长,则最

我正在使用bootstrap,并且想要创建一个简单的 HTML表,在最后一列中我有一个2按钮组和一个单独的按钮.我希望这最后一个单元格始终将这3个按钮保持在一行中,所以我添加了text-nowrap引导类(这是一个简单的空白区域：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和单独的按钮都是内联块元素,因此包装应该按预期的IMO工作.我究竟做错了什么？

也许这与bootstrap没有严格的关系.

UPDATE

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

原因和解决方法

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

解决方法

< table class =“table”>将填充其容器的100％宽度.列宽与其内容的宽度成比例分割.

当左侧声称较大部分时,按钮列将“短”.

当左手侧具有较小部分时,按钮列将变大,从而使按钮“向中心移动”.

要解决：使用固定值设置右侧列的宽度.所有三个按钮的总宽度值：宽度：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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!