CSS: <tbody> width is wider than <table> width. Text is not wrapping
<p>I have the following HTML code:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;table class="table"&gt;
    &lt;tbody class="tBody"&gt;
      &lt;tr&gt;
        &lt;td&gt;Hellooooooooooooooooooooooooooooooooooooooooooooo&lt;/td&gt;
        &lt;td&gt;World&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>And CSS:</p>

<pre><code>.container {width: 100%;}
.table {display:block;}
.tBody {max-width: inherit;}
</code></pre>

<p>My problem is that the total width is defined by a dragbar, so the widths of all the elements must me dynamic. I want the text inside the <code>&lt;td&gt;</code> element to be able to wrap itself dynamically. So far, the <code>&lt;div&gt;</code>'s width changes its value according to the position of the dragbar. To make it have the <code>&lt;div&gt;</code>'s width, I set the <code>&lt;table&gt;</code> CSS to <code>display:block</code>. The rest of the elements in the table, <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>, set their width to the widest element in the table, which in this case is the text 'Hellooooooooooooooooooooooooooooooooooooooooo'. So right now, if I move the dragbar to try to make the table smaller, the <code>div</code> will change its width but the table elements' width will remain the same. Text won't wrap either.</p>

<p>How to make the width of a table (and its children) be set by a dragbar? </p>