title: How do I wrap several buttons inside a TD element
body: <p>I'm trying to alter this collection of buttons to wrap at the right edge of the screen.  Currently they do not respect the right border of the screen and they just continue off the edge (well they aren't visible anyway).
  How do I force these buttons to automatically wrap to a new line within the table? The screen is re-sizable so I can't just set them statically.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;td&gt;    
  &lt;table class="clsActionTable"&gt;
      &lt;tr&gt;
          &lt;td style="text-align:center;"&gt;
              &lt;button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();"&gt;Add&lt;/button&gt;
              &lt;button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();"&gt;Edit&lt;/button&gt;
              &lt;button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();"&gt;Delete&lt;/button&gt;
              &lt;button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();"&gt;Add Row&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the CSS...</p>
  
  <pre><code>.clsActionTable
  {
      width: 100%;
      color: white;
      font-size: smaller;
  }
  
  .clsActionButton
  {
      width: 128px;
  }
  #idActionPlane
  {
  left: 0px;
  bottom: 0px;
  width:100%;
  background-color: #4E5A81;
  color: White;
  }
  </code></pre>