Set buttons in table to match width and height of widest or tallest button in their row or column

Question

I want to create a table of buttons that, when generated with x rows and y columns and user generated button captions, each button in a row is as tall as the tallest one in its row, and each button in a column is as wide as the widest one in its column.

Is there a solution to this with flexbox, or do I need to use JS?

.button1 {width:97px; height:37px;}
.button3 {height:37px;}
.button5 {width:61px;}

<table>
  <tr>
   <td><button class="button1">First</button></td> 
   <td><button>Second<br>Button</button></td>
   <td><button class="button3">Third</button></td>
  </tr>
  <tr>
   <td><button>Fourth is long</button></td> 
   <td><button class="button5">Fifth</button></td>
   <td><button>Sixth</button></td> 
  </tr>
</table>

Above snippet is also on JS Fiddle.

Thank you

Answer 1

Before we start, quick note, make sure you include a tbody tag inside your table tag; the browser will just add it for you anyway.

Now then: You can't pull this off with CSS alone. The reason is that CSS is a two-dimensional language, not a three-dimensional one. So you can structure your HTML into columns and get all the buttons in a column matching, or you can do a table as you have, and get all the buttons in a row matching, but you can't do both.

Here's an example of making buttons within the same column have the same width (but not height) with flexbox, by reversing the default flex behavior to allow growing but not shrinking:

.button1 {width:97px; height:37px;}
.button3 {height:37px;}
.button5 {width:61px;}

td div {
  display: flex;
}
td div button {
  flex: 1 0 auto;
}

<table>
  <tbody>
    <tr>
     <td><div><button class="button1">First</button></div></td> 
     <td><div><button>Second<br>Button</button></div></td>
     <td><div><button class="button3">Third</button></div></td>
    </tr>
    <tr>
     <td><div><button>Fourth is long</button></div></td> 
     <td><div><button class="button5">Fifth</button></div></td>
     <td><div><button>Sixth</button></div></td> 
    </tr>
  </tbody>
</table>

And an example of making heights in a row match, but not widths:

.button1 {
  width: 97px;
  height: 37px;
}
.button3 {
  height: 37px;
}
.button5 {
  width: 61px;
}
table {
  display: flex;
}
tr {
  display: flex;
}
td {
  display: flex;
}
td div {
  display: flex;
  flex-direction: column;
}
td div button {
  flex: 1 0 auto;
}

<table>
  <tbody>
    <tr>
      <td><div><button class="button1">First</button></div></td>
      <td><div><button>Second<br>Button</button></div></td>
      <td><div><button class="button3">Third</button></div></td>
    </tr>
    <tr>
      <td><div><button>Fourth is long</button></div></td>
      <td><div><button class="button5">Fifth</button></div></td>
      <td><div><button>Sixth</button></div></td>
    </tr>
  </tbody>
</table>

To get around CSS's limitations, we really need a JavaScript solution. We can query the width/height of each button in a given row/column, then set all buttons in that row/column to match that of the widest/tallest one.

The below snippet completes your request by setting both widths and heights in JavaScript, forgoing flexbox entirely. But as you can see from the CSS examples above, it's conceivable that you could use flex CSS to handle one dimension and then pull out the relevant half of the JavaScript below to handle the other dimension.

$(function() {
  //for each row
  $('table tr').each(function() {
    var maxHeight = 0;
    var tallestButton = null;
    var $element;
    //find the tallest button
    $(this).find('td').each(function() {
      $element = $(this).find('button');
      var buttonHeight = $element.height();
      if (buttonHeight > maxHeight) {
        maxHeight = buttonHeight;
        tallestButton = $element;
      }
    });
    //then set each button in that row to the widest button's width
    $(this).find('td button').each(function() {
      $(this).height(tallestButton.height());
    });
  });

  //find width of table in columns, based on number of cols in first row
  var x = $('table tr:first-child td').length;

  //for each column
  for (var i=1; i<x+1; i++) {
    var maxWidth = 0;
    var widestButton = null;
    var $element;
    var cellInCol = $('table tr td:nth-child(' + i + ')');

    $(cellInCol).each(function() {
      $element = $(this).find('button');
      var buttonWidth = $element.width();
      if (buttonWidth > maxWidth) {
        maxWidth = buttonWidth;
        widestButton = $element;
      }
    });
    $(cellInCol).find('button').each(function() {
      $(this).width(widestButton.width());
    });
  }
});

.button1 {
  width: 97px;
  height: 37px;
}
.button3 {
  height: 37px;
}
.button5 {
  width: 61px;
}
.button7 {
  height: 80px;
}
table {
  border-collapse: collapse;
}
table td {
  border: 1px solid gray;
  padding: 5px;
  text-align: center;
}
button {
  white-space: no-wrap; /* fix for long captions on PC */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><button class="button1">First</button></td>
      <td><button>Second<br>Button</button></td>
      <td><button class="button3">3rd</button></td>
    </tr>
    <tr>
      <td><button>Fourth is long</button></td>
      <td><button class="button5">Fifth</button></td>
      <td><button>Sixth (6th)</button></td>
    </tr>
    <tr>
      <td><button>Six</button></td>
      <td><button class="button7">7</button></td>
      <td><button>8</button></td>
    </tr>
    <tr>
      <td><button>Nine</button></td>
      <td><button>Ten</button></td>
      <td><button>Eleven</button></td>
    </tr>
  </tbody>
</table>