Make table td not overlap
<p>I'm trying to make a bootstrap table which displays a few data rows, one of them including two buttons.</p>

<p>The problem is that when the screen resizes to smaller sizes the buttons get on top of each other and I want to have each TD of the table in a single row, having overflow or whatever it needs.</p>

<p>I've searched but non of the answers helped me in any way. I don't know if I'm missing something pretty obvious (probably is the case) or it's a bit more complex that I believe.</p>

<p>Here's a replica of my table: <a href="http://codepen.io/TheMese/pen/vymEQZ?editors=1100" rel="nofollow noreferrer">http://codepen.io/TheMese/pen/vymEQZ?editors=1100</a></p>

<p>Here's just the table:</p>

<pre><code>&lt;table class="table table-hover table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Uid&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;High Available&lt;/th&gt;
            &lt;th&gt;Strict Mode&lt;/th&gt;
            &lt;th&gt;Shared&lt;/th&gt;
            &lt;th&gt;Nodes Assigned&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;123123&lt;/td&gt;
            &lt;td&gt;Node Pool Name&lt;/td&gt;
            &lt;td&gt;Node Pool Description&lt;/td&gt;
            &lt;td&gt;Node Pool High Availability&lt;/td&gt;
            &lt;td&gt;Node Pool Strict Mode &lt;/td&gt;
            &lt;td&gt;Node Pool Shared&lt;/td&gt;
            &lt;td&gt;Node Pool ASsigned&lt;/td&gt;
            &lt;td&gt;
              &lt;button class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
</code></pre>