用 CSS 中任意数量的等宽按钮完全填充表格单元格

Question

我有一个这样的（简化的）HTML 结构：

<div class="table">
    <form class="tr">
        <span class="td">
            <input type="submit" value="Button 1"/>
            <input type="submit" value="Button 2"/>
            <input type="submit" value="Button 3"/>
        </span>
    </form>
</div>

里面的提交按钮是用JSP在服务器端动态生成的，所以它们的数量可能会有所不同，通常在1-3的范围内。

这是我目前所拥有的简化 CSS：

.table {
    display: table;
}
.table .tr {
    display: table-row;
}
.table .tr .td {
    display: table-cell;
    padding: 5px;
    border: 1px solid black;
}
.table .tr .td input[type=submit] {
    width: 100%;
}

但是，设置按钮的width=100% 会使每个按钮与单元格一样宽，从而导致它们垂直环绕并彼此相邻显示。

我想要的是扩展所有按钮的宽度，以便它们填满包含的单元格，但一个单元格中的所有按钮都应具有相同的宽度。这必须适用于每个单元格的不同数量的按钮，我想要一个不依赖 JavaScript 的解决方案。

这是我希望它的外观的另一个可视化：

+----------------------------------------------+
| [  Button 1  ] [     B2     ] [   Btn. 3   ] |
+----------------------------------------------+
| [      Button A      ] [      Button B     ] |
+----------------------------------------------+
| [           only one wide button           ] |
+----------------------------------------------+

Answer 1

这是flexbox 的完美案例- 将display: flex 应用于您的td：

.table .tr .td {
  display: flex;
} 

让我知道您对此的反馈。谢谢！

.table {
  display: table;
}
.table .tr {
  display: table-row;
}
.table .tr .td {
  display: flex;
  padding: 5px;
  border: 1px solid black;
}
.table .tr .td input[type=submit] {
  width: 100%;
}

<div class="table">
  <form class="tr">
    <span class="td">
            <input type="submit" value="Button 1"/>
            <input type="submit" value="Button 2"/>
            <input type="submit" value="Button 3"/>
        </span>
    <span class="td">
            <input type="submit" value="Button 1"/>
            <input type="submit" value="Button 2"/>
        </span>
    <span class="td">
            <input type="submit" value="Button 1"/>
        </span> 
  </form>
</div>