在表格中设置按钮以匹配其行或列中最宽或最高按钮的宽度和高度

Question

我想创建一个按钮表，当使用x行和y列以及用户生成的按钮标题生成时，行中的每个按钮都与行中最高的按钮一样高，列中的每个按钮都是与其专栏中最宽的一样宽。

使用flexbox有解决方案，还是需要使用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>

以上代码段也是on JS Fiddle。

谢谢

Answer 1

在开始之前，请快速记下，确保在tbody标记中加入table标记;浏览器无论如何都会为你添加它。

现在：你不能单独用CSS来解决这个问题。原因是CSS是一种二维语言，而不是三维语言。因此，您可以将HTML结构化为列并使列中的所有按钮匹配，或者您可以按原样执行表格，并将所有按钮连续匹配，但您无法同时执行这两项操作。

通过反转默认的弹性行为以允许增长但不缩小，在同一列中制作按钮的示例与flexbox具有相同的宽度（但不是高度）：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

一个连续高度匹配的例子，但不是宽度：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

为了解决CSS的局限性，我们确实需要一个JavaScript解决方案。我们可以查询给定行/列中每个按钮的宽度/高度，然后设置该行/列to match that of the widest/tallest one中的所有按钮。

以下代码段通过在JavaScript中设置宽度和高度来完成您的请求，完全放弃Flexbox。但正如您从上面的CSS示例中可以看到的那样，可以想象您可以使用flex CSS来处理一个维度，然后从下面提取相关的一半JavaScript来处理另一个维度。

＆＃13;

＆＃13;

$(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());
    });
  }
});

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;