title: Make Buttons the Same Size regardless of Text / Cross-Browser Support
body: <p>I have created a JSFiddle in which it shows 6 buttons and text inside each. What I am trying to accomplish is figuring out why on Chrome it looks fine in which all the the buttons will match the size of the largest button(the one with the most text) while the on the other browsers the buttons do not match:
  <a href="http://jsfiddle.net/tXS6w/432/" rel="nofollow">http://jsfiddle.net/tXS6w/432/</a></p>
  
  <pre><code>&lt;table class=buttons&gt;
   &lt;tr&gt;
      &lt;td&gt;&lt;button type="button"&gt;Hello there my name is bob and this is a test  &lt;/button&gt;
      &lt;td&gt;&lt;button type="button"&gt;B&lt;/button&gt;
      &lt;td&gt;&lt;button type="button"&gt;C&lt;/button&gt;
      &lt;td&gt;&lt;button type="button"&gt;D&lt;/button&gt;
      &lt;td&gt;&lt;button type="button"&gt;E&lt;/button&gt;
        &lt;td&gt;&lt;button type="button"&gt;F&lt;/button&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.buttons { 
    width: 100%;
    table-layout: fixed;
  }
  .buttons button { 
    width: 100%;
    height: 100%;
    white-space: normal;
  }
  </code></pre>