How to make a responsive table header?
<p>I have this table, but elements at last column don't fit the entire table when display is in a big size. What am I doing wrong?</p>
<h1>Large</h1>
<p><a href="https://i.stack.imgur.com/qAZnk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qAZnk.png" alt="enter image description here" /></a></p>
<h1>Medium</h1>
<p><a href="https://i.stack.imgur.com/MoXYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MoXYK.png" alt="enter image description here" /></a></p>
<h1>Small</h1>
<p><a href="https://i.stack.imgur.com/BYax3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BYax3.png" alt="enter image description here" /></a></p>
<h1>I have</h1>
<pre><code>&lt;div class=&quot;panel-body&quot;&gt;
  &lt;table class=&quot;table mb30&quot; class=&quot;display&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width=&quot;5%&quot;&gt;#&lt;/th&gt;
        &lt;th width=&quot;30%&quot;&gt;Site Name&lt;/th&gt;
        &lt;th width=&quot;40%&quot;&gt;Site URL&lt;/th&gt;
        &lt;th width=&quot;25%&quot;&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;URL&lt;/td&gt;
        &lt;td&gt;Action&lt;/td&gt;
      &lt;/tr&gt;

    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>
<hr />
<p>I've put together a <a href="https://jsfiddle.net/bheng/pkjbpsr7/" rel="nofollow noreferrer">fiddle</a></p>