title: Bootstrap table not following width with display: block
body: <p><br>
  I'm actually running into a trouble since yesterday.<br>
  I'm using Bootstrap 4, and tables. Actually, if I put a width over 13.5vw, the table don't follow. Here's the fiddle <a href="https://jsfiddle.net/aq9Laaew/88681/" rel="nofollow noreferrer">https://jsfiddle.net/aq9Laaew/88681/</a><br>
  Here's the code</p>
  
  <h2>HTML</h2>
  
  <pre><code>            &lt;table class="table table-striped datas-table table-sm rounded"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th scope="col"&gt;Date of Visit&lt;/th&gt;
                          &lt;th scope="col"&gt;Duration&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                          &lt;td&gt;Data&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>Then the CSS</p>
  
  <h2>CSS</h2>
  
  <pre><code>.datas-table {
      overflow: auto;
      display: block;
      border-radius: 5px;
      margin-top: 0.2604166666666667vw;
      margin-left: 0.5208333333333334vw;
      height: 16.11111111111111vh;
      width: 14.583333333333334vw;
      border: 1px solid rgba(0,0,0,0.1);
      background-color: #FFFFFF;
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  }
  .datas-table &gt; tbody &gt; tr &gt; td:nth-child(2), .datas-table &gt; thead &gt; tr &gt; th:nth-child(2) {text-align: right; padding-right: 1.1458333333333335vw;}
  .datas-table &gt; tbody &gt; tr &gt; td:nth-child(1), .datas-table &gt; thead &gt; tr &gt; th:nth-child(1) {padding-left: 0.5729166666666667vw;}
  </code></pre>
  
  <p>As you could see in the Fiddle, the table don't seems to follow.
  The reason of why I want to use display: block, is due to overflow: auto, without it, my table won't scroll and the width will not be respected</p>
  
  <p>Thankfully,</p>