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

Question

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

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

这是一个屏幕截图。注意灰色框被推到外面，导致布局看起来很糟糕：

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

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

我试过了：

• 在表格上设置table-layout: fixed，在表格单元格上设置word-wrap: break-word。这行得通，但是表格内容在视觉上很糟糕；一个词分成三行，以此类推。
• 在表容器上设置max-width 有效，但它必须在px 单元中。这可能是最后的手段（将通过 Javascript 应用），因为网站有不同的布局宽度。

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

Answer 1

当我把<table class="table"> 里面的<div class="row"> 放在桌子外面时，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">

Answer 2

您自己提供了一半的解决方案，使用table-layout: fixed 可以完美运行。但是内容看起来很糟糕！所以我解决了这个问题。只需添加这个 css -

.slide-content > table.table {
  table-layout: fixed;
}

Answer 3

我正在寻找可滚动类（表格容器）上的简单 CSS hack 或类似的东西

您是否尝试过灰色框.col-sm-3 上的position: fixed 或position: absolute？这应该将.col-sm-3 排除在其余内容的流程之外（默认情况下，所有内容都是position: static）。

这样做时，col-sm-3 将出现在您期望的位置，无论其他“静态”元素在做什么，只要您没有冲突的样式即可。

更新：https://jsfiddle.net/zer00ne/azkn7436/

HTML

    <div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: lightgray; height:400px;">Aside Menu</div>
        <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>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <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>FSH 10%</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" style="position: fixed; right:0; bottom: 50%">
                                    <img src="https://placehold.it/120x120">
                                    <br> <a href="#">Click to enlarge</a>

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

css

.scrollable {
    overflow-x: scroll;
    max-width: 75%;
}
.scrollable table {
    margin: 0px;
    border-color: lightgray;
    word-wrap: break-word;
}
.slide-content {
    border: 1px solid lightgray;
}
/*  st    .slide-content > table.table {
  table-layout: fixed;
} */

你的.col-sm-3 是position: fixed; bottom: 50%; right: 0; 现在你可以把你的桌子拉到你想要的宽度，右边的灰色小盒子是不可能移动的。