Bootstrap inverse table and thead not styling correctly
<p>While working on a Bootstrap-based project, I came across a strange issue where some of the styling was being overridden by the user agent stylesheet (in Chrome and Firefox). I found <a href="https://stackoverflow.com/questions/9308234/user-agent-stylesheet-overriding-my-table-style-twitter-bootstrap">this related issue</a>, which was solved by including the <code>&lt;!DOCTYPE html&gt;</code> tag I had initially omitted. But now I can't get the <code>.table-inverse</code>, <code>.thead-inverse</code>, or <code>.thead-default</code>classes to shade my table headers. As far as I understand, I have all the necessary rows, containers, etc in place.</p>

<p>Why isn't the shading working?</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-css lang-css prettyprint-override"><code>.navbar {
  border-radius: 0px
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;

&lt;h2 class="display-1"&gt;Bootstrap 4 Inverse Table&lt;/h2&gt;

&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;table class="table table-inverse"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Username&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;@mdo&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;@fat&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;@twitter&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/x2nrn18a/" rel="noreferrer">View on JSFiddle</a></p>