title: Bootstrap Table with Fixed Column on top when scrolling down
body: <p>I am building a table with Laravel for a web page. I would like to fix columns on the top when scrolling down so that one can still the column names.</p>
  <p>Is there a way to do that in Laravel or with Bootstrap?</p>
  <pre><code>&lt;div class=&quot;card-body&quot; style=&quot;height:400px; width:99%; overflow:scroll;&quot;&gt;
      &lt;!--TABLE--&gt;
      &lt;h5&gt;ED Visits Suspected Drug Overdose Data&lt;/h5&gt;
      &lt;div class=&quot;table&quot;&gt;
          &lt;table class=&quot;table mb-0&quot;&gt;
              &lt;thead&gt;
                  &lt;tr style=&quot;vertical-align:center;&quot;&gt;
                      &lt;th scope=&quot;col&quot;&gt;Ohio County&lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2016 Q3 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2016 Q4 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2017 Q1 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2017 Q2 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2017 Q3 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2017 Q4 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2018 Q1 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2018 Q2 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2018 Q3 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2018 Q4 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2019 Q1 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2019 Q2 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2019 Q3 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2019 Q4 &lt;/th&gt;
                      &lt;th scope=&quot;col&quot;&gt;2020 Q1 &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;!--data and codes--&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/TRglc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TRglc.jpg" alt="Before Scrolling and After Scrolling" /></a></p>