title: Center bootstrap table with 100% width?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;table class="table table-striped table-hover table-responsive"&gt;
    &lt;thead&gt;
      &lt;th scope="col"&gt;column1&lt;/th&gt;
      &lt;th scope="col"&gt;column2&lt;/th&gt;
      &lt;th scope="col"&gt;column3&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;item1&lt;/td&gt;
        &lt;td&gt;item2&lt;/td&gt;
        &lt;td&gt;item3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;item1&lt;/td&gt;
        &lt;td&gt;item2&lt;/td&gt;
        &lt;td&gt;item3&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is it possible to center this table without giving the table a width other than 100%? Most of the answers I've found for doing this all give the table a width less than 100%. This isn't very nice since when you then center the element if the display is big enough the table still appears to not be centered.</p>