Блог

У меня есть (упрощенная) структура 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           ] |
 ---------------------------------------------- 
 

Это идеальный случай для 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>