title: Extra column in bootstrap table
body: <p>Why there is an extra column in the table? <img src="https://i.stack.imgur.com/9tHsi.png" alt="table image"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;center&gt;
      &lt;a href="./" class="btn btn-primary"&gt;
        &lt;i class="far fa-hand-point-left"&gt;&lt;/i&gt; Back
      &lt;/a&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;table class="table table-striped table-hover table-bordered table-responsive"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Sr.&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Contact&lt;/th&gt;
            &lt;th&gt;City&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;
              Name&lt;/td&gt;
            &lt;td&gt;Email Id (Mobile Number)&lt;/td&gt;
            &lt;td&gt;City&lt;/td&gt;
            &lt;td&gt;&lt;button class="btn btn-large btn-primary" disabled&gt;Waiting for Directory&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;
              Name&lt;/td&gt;
            &lt;td&gt;Email Id (Mobile Number)&lt;/td&gt;
            &lt;td&gt;City&lt;/td&gt;
            &lt;td&gt;&lt;a href="?ua=trial" class="btn btn-large" style="background-color: red;color: white;"&gt;Block&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
        &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/center&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why there is an extra column in the table? <a href="https://i.stack.imgur.com/9tHsi.png" rel="nofollow noreferrer">see image</a></p>
  
  <p>Also, why there is scrollbar when screen is small? (It should adjust itself with the screen as I am using <strong>table-responsive</strong>.)</p>