title: Bootstrap 4 responsive tables won't take up 100% width
body: <p>I am building a web app using Bootstrap 4 and running into some weird issues.  I want to utilize Bootstrap's table-responsive class to allow horizontal scrolling of the tables on mobile devices.   On desktop devices the table should take up 100% of the containing DIV's width.</p>
  
  <p>As soon as I apply the .table-responsive class to my table, the table shrinks horizontally and no longer takes up 100% of the width.   Any ideas?  </p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" class="mdl-js"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="application-name" content=""&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;link rel="stylesheet" href="/css/bundle.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid no-padding"&gt; 
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;table class="table table-responsive" id="Queue"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;&lt;span span="sr-only"&gt;Priority&lt;/span&gt;&lt;/th&gt;
                              &lt;th&gt;Origin&lt;/th&gt;
                              &lt;th&gt;Destination&lt;/th&gt;
                              &lt;th&gt;Mode&lt;/th&gt;
                              &lt;th&gt;Date&lt;/th&gt;
                              &lt;th&gt;&lt;span span="sr-only"&gt;Action&lt;/span&gt;&lt;/th&gt;
                           &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                            &lt;tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d"&gt;
                                &lt;td&gt;0&lt;/td&gt;
                                &lt;td&gt;PHOENIX, AZ&lt;/td&gt;
                                &lt;td&gt;SAN DIEGO, CA&lt;/td&gt;
                                &lt;td&gt;DRIVING&lt;/td&gt;
                                &lt;td&gt;&lt;time datetime="2017-01-15T13:59"&gt;2017-01-15 13:59:00&lt;/time&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"&gt;&lt;/span&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;"&gt;
                                &lt;td colspan="6" class="no-padding"&gt;&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
             &lt;/div&gt;
             &lt;br&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/js/bundle.min.js"&gt;&lt;/script&gt;
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I apply a 100% width to the .table-responsive class, it makes the table itself a 100% wide but the child elements (TBODY, TR, etc.) are still narrow.</p>