Имеется таблица с данными, которую я организовал не обычными тегами
<table> ,<tr>, <th> и <td>, а с помощью
<div> таким образом:
/* Block table */
.table {
display: table;
}
.table-row {
color: #3C4146;
text-decoration: none;
display: table-row;
cursor: pointer;
}
.table-header,
.table-data {
display: table-cell;
}
Для чего это сделано? На бэкэнде высчитываются данные таблицы и выводятся на фронт. Теперь я хочу, чтобы по нажатию на строку мне передавались определенные данные из этой строки на бэк.
Как я это могу сделать? Могу тегу объявить класс
table-row и через ссылку передавать параметры.
P.S. Для дальнейшего примера сокращу код.
Это будет выглядеть так:
<a class="table-row" href="/controller?command=show_account_offer&offer_id="3></a>
Будут эти данные передаваться на бэк (сервлет) с помощью метода
GET, следовательно, в строке запроса всё это будет видно. Поэтому я хочу передать значение
offer_id=3 методом
POST. Для этого я создам форму, внутри этой формы создам скрытый . Внутри этой же формы создам кнопку
<button> с атрибутами name и
value. Ну и следовательно внутри кнопки
<button>, которая выступает строкой, будут табличные столбцы. Всё это будет выглядеть следующим образом:
<form class=table" action="controller" method="POST">
<input type="hidden" name="command" value="show_account_offer">
<div class="table-row">
<div class="table-data">text1</div>
<div class="table-data">text2</div>
</div>
</form>
Тут всё ок. И полная таблица выглядит нормально:
Теперь, когда я пытаюсь сделать строкой кнопку:
<form class=table" action="controller" method="POST">
<input type="hidden" name="command" value="show_account_offer">
<button class="table-row" name="offer_id" value="3">
<div class="table-data">text1</div>
<div class="table-data">text2</div>
</button>
</form>
То кнопка всё выглядит уродливо вот так:
Как сделать, чтобы кнопка, сделанная строкой, растягивалась на всю строку?
Пробовал добавлять в стили CSS так, но это не срабатывает:
.table > button {
display: table-row;
}
