Question

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

我有一个包含一些列的表，显示在div（表容器）中。表容器具有col-md-9引导类，因此其宽度设置为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">时，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

您是否在灰色框position: fixed上尝试了position: absolute或.col-sm-3？这应该从内容的其余部分流出.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;现在，您可以根据需要拉伸桌子，右边的小灰框也不会移动。

可滚动容器内的表仍然导致容器宽度增长

3 个答案:

HTML

CSS