填满一个表格单元格完全与任何数量的在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>