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

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>

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

Fill up a table cell completely with any number of equally wide buttons in CSS

html

css

width

flexbox