How to make my table scrollable/responsive if it has many contents that don't fit my screen?
<p>I added an <code>overflow-x:scroll</code> to my panel because I have many columns in my table, which has worked nicely for scrolling. But the blue color of the panel heading stops at the right-hand side of the page; to the right after that the panel heading is white and it looks bad. How do I make the blue panel heading stretch to the right so it doesn't just cut off at the right hand side of the page?</p>

<pre><code>&lt;div class="panel panel-primary" style="overflow-x:scroll"&gt;
    &lt;div class="panel-heading"&gt;Heading&lt;/div&gt;
        &lt;table class="table table-striped"&gt;
            &lt;tr&gt;
                &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>