Невозможно сделать кнопку в таблице на 100% высоты столбца

Question

Привет, у меня проблема с таблицей. Я использую bootstrap. В таблице есть столбцы (некоторые из них заполнены данными, некоторые нет). Каждый столбец должен быть кнопкой (пустые столбцы тоже). У меня есть проблема, чтобы сделать кнопки в столбце на 100% высоты тд. Одно условие состоит в том, что в td есть div, а в этом div есть кнопка. Итак, структура выглядит следующим образом:

<tr>
 <td>
   <div> //THIS DIV IS IMPORTANT i am using react-bootstrap framework and component Button is including that div inside 
     My text data empty or not
   </div>
 </td>
</tr>

Я удалил отступы, я делаю div и кнопки на 100% по высоте и ширине, но высота кнопки по-прежнему не равна 100%. В чем проблема, пожалуйста?

Вот jsfiddle

Я поставил здесь плохую ссылку, прежде чем она должна быть в порядке

Answer 1

Что мешает кнопке иметь 100% высоты, это отступы в вашей таблице th и td.

.table td, .table th {
  padding: 0;
}

Answer 2

Я проверил вашу скрипку и пару на заметках:

1. Измените Bottom элемент на button.

2. Поскольку вы используете bootstrap, вы наследуете стиль от них. Самый быстрый способ переопределить это - использовать !important.

Вы можете добавить: table th, table td {padding: 0!important;}, и тогда button {height: 100%} будет работать как положено.

Подробнее о таблицах bootstrap можно прочитать в документы .