title: Bootstrap 4 : Vertical alignment in responsive table
body: <p>With Bootstrap 4, when <code>table-responsive</code> is added to the table, the text is no longer center vertically. Is it a bug ? If not, is there a simple solution to get the text centered in the middle. A pure Bootstrap solution will be appreciated.</p>
  <p>Here is an illustration of the problem.</p>
  <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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt; 
  
  &lt;table class="bg-danger table-responsive" style="width:300px; height:200px;"&gt;  
    &lt;tr&gt;
      &lt;th scope="row"&gt;
        &lt;div class="text-left"&gt;
          table-responsive
        &lt;/div&gt;      
      &lt;/th&gt;
    &lt;/tr&gt;  
  &lt;/table&gt;
  
  &lt;table class="bg-success " style="width:300px; height:200px;"&gt;  
    &lt;tr&gt;
      &lt;th scope="row"&gt;
        &lt;div class="text-left"&gt;
          no table-responsive
        &lt;/div&gt;      
      &lt;/th&gt;
    &lt;/tr&gt;  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>