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