html - 可滚动容器内的表格仍然导致容器宽度增加

Question

我正在使用 Bootstrap 网格。我目前在 Bootstrap 列中显示表格时遇到一个奇怪的问题。

我有一个包含一些列的表格，显示在一个 div(表格容器)内。表格容器有 col-md-9 Bootstrap 类，所以它的宽度设置为 75%。但是，在某个时刻，如果表格包含过多的内容和/或列，则会导致容器的宽度扩大。这是一个独立的例子:https://output.jsbin.com/xowihu

这是截图。注意灰色框被推到外面，导致布局看起来破损:

而且，当我从表格中删除一些列时，它可以正常工作并且看起来像预期的那样:

让我感到困惑的是，我已经在表格容器上指定了overflow: scroll。为什么内容长度会影响容器宽度？

我试过:

• 在表格上设置table-layout: fixed，在表格单元格上设置word-wrap: break-word。这行得通，但是表格内容在视觉上很糟糕；一个词分成3行等。
• 在表格容器上设置max-width 是可行的，但它必须以px 为单位。这可能是最后的手段(并将通过 Javascript 应用)，因为网站具有各种布局宽度。

编辑 代码链接:https://jsbin.com/xowihu/edit

Answer 1

当我把 <div class="row">那是在<table class="table">里面在 table 外面，tr，td 它工作得很好..

<div class="col-md-7 slide-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="row">
              <div class="col-sm-9">
                <div class="row">
                  <div class="col-sm-2" style="height: 250px; background-color: lightgreen">Some Label</div>
                  <div class="col-sm-9 scrollable">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem libero sequi tempore necessitatibus tempora, porro, iure, nisi dicta, rerum enim natus facilis voluptatum soluta dolore molestias vero odit eaque veniam.</p>
                    <table class="table" border="1" cellpadding="1" cellspacing="1">
                      <tbody>
                        <tr>
                          <td>Hello</td>
                          <td>Lipsumdolor</td>
                          <td>Lipsum Gen</td>
                          <td>Lorem ipsum dolor sit amet</td>
                          <td>Lorem ipsum dolor</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                        </tr>
                        <tr>
                          <td>Hello</td>
                          <td>Lipsumdolor</td>
                          <td>LipsumLipsumLipsumLipsum</td>
                          <td>Lorem ipsum dolor sit amet</td>
                          <td>Lorem ipsum dolor</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                          <td>Lorem ipsum</td>
                        </tr>
                        <tr>
                          <td>Hello</td>
                          <td>Lipsumdolor</td>
                          <td>Lipsum Gen</td>
                          <td>Lorem ipsum dolor sit amet</td>
                          <td>Lorem ipsum dolor</td>
                          <td>qwertyuiop</td>
                          <td>qwertyuiop</td>
                          <td>qwertyuiop</td>
                          <td>qwertyuiop</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                </div>
              </div>
              <div class="col-sm-3">
                <img src="https://placehold.it/120x120"><br>
                <a href="#">Click to enlarge</a>
              </div>
            </div><table class="table">
      <tbody>
        <tr>
          <td>

          </td>
        </tr>
      </tbody>
    </table>
  </div>

所以我所做的一切都是，获取

中的 div class="row"

<table class="table">
  <tr>
    <td>

然后把它放在

下面

<div class="col-md-7 slide-content">