填滿一個表格單元格完全與任何數量的在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>