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

Question

I am using Bootstrap grid. I am currently facing a strange issue with displaying tables inside Bootstrap column.

I have a table with some columns, displayed inside a div (table container). The table container has col-md-9 bootstrap class, so its width is set to 75%. However, at a certain point if the table contains too much content and/or column, it causes the container's width to expand. Here is a standalone example: https://output.jsbin.com/xowihu

Here is a screenshot. Notice the gray box getting pushed outside, causing the layout to look broken:

And, when I removed some columns from the table, it works and looks as expected:

The thing that confuses me is that, I have already specified overflow: scroll on the table container. Why is content length affecting container width?

I have tried:

• Setting table-layout: fixed on the table, and word-wrap: break-word on the table cells. This works, however the table contents are visually horrible; one word is broken into 3 lines, etc.
• Setting max-width on the table container works, but it has to be in px unit. This might be last resort (and will be applied via Javascript) since site has various layout widths.

EDIT Link to code: https://jsbin.com/xowihu/edit

Answer 1

When I put the <div class="row"> that was inside the <table class="table"> outside the table,tr,td it works just fine..

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

SO everything that I did was, get the div class="row" that is inside the

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

And put it underneath the

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

Answer 2

You yourself provide half of the solution, using table-layout: fixed works perfectly. But the content was looking horrible! So I resolved that issue. Just add this css -

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

Answer 3

I am looking for example a simple CSS hack on the scrollable class (table container) or something like that

Have you tried position: fixed or position: absolute on the grey box .col-sm-3 ? That should take .col-sm-3 out of the flow of the rest of the content (by default everything is position: static ).

In doing so, col-sm-3 will appear where you expect it to be no matter what the other "static" elements are doing, as long as you have no conflicting styles that is.

UPDATE : 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;
} */

Your .col-sm-3 is position: fixed; bottom: 50%; right: 0; position: fixed; bottom: 50%; right: 0; Now you can stretch your table as wide as you want, there ain't no way the little grey box on the right will move.