Make Buttons the Same Size regardless of Text / Cross-Browser Support

Question

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: http://jsfiddle.net/tXS6w/432/

<table class=buttons>
 <tr>
    <td><button type="button">Hello there my name is bob and this is a test  </button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
      <td><button type="button">F</button>
</table>

css

.buttons { 
  width: 100%;
  table-layout: fixed;
}
.buttons button { 
  width: 100%;
  height: 100%;
  white-space: normal;
}

score 3 · Accepted Answer · answered Dec 02 '15 at 13:07

A possible solution is Flexbox

.buttons {
  width: 100%;
  table-layout: fixed;
}
.buttons tr {
  display: flex;
}
.buttons tr td {
  flex: 1;
  display: flex;
  flex-direction: column;
}
button {
  flex: 1;
}

<table class=buttons>
  <tr>
    <td>
      <button type="button">Hello there my name is bob and this is a test</button>
    </td>
    <td>
      <button type="button">B</button>
    </td>
    <td>
      <button type="button">C</button>
    </td>
    <td>
      <button type="button">D</button>
    </td>
    <td>
      <button type="button">E</button>
    </td>
    <td>
      <button type="button">GF</button>
    </td>
  </tr>
</table>

This may be the best way to go. Just make sure you test in IE well. Flexbox isn't support in IE < 10 and it isn't even completely working in 11 — mcgraphix, Dec 02 '15 at 13:11

score 1 · Answer 2 · edited Dec 07 '15 at 15:29

When you set with width via CSS as a percentage, it will be a percentage of the size of the containing element. In this case, the <td>. Since those don't have a width defined, the sizing can be unpredictable. It seems that some browsers will size the cells equally while others don't. Like @Mumeltier said, if you set the size in px instead of percent that will work. But I'm guessing you didn't want to hard-code the size in px. So one option would be to set the width of the table cells to be 1/6th of the size of the table:

.buttons tr td {
    width: 16.66667%;
}

I don't have a browser installed that illustrates the issue you were having, so I'm not 100% sure that this solution would work for you.

I downloaded and tried Firefox. Now I see that you were talking about the height, not sizing correctly. That is bit more tricky. See http://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell — mcgraphix, Dec 02 '15 at 13:09

Make Buttons the Same Size regardless of Text / Cross-Browser Support

2 Answers2