Размер кнопки над ячейкой таблицы

Question

Как установить для кнопки тот же размер, что и для ячейки таблицы, но чтобы она меняла свой размер при разных разрешениях монитора, например в этой же ячейке.В то же время точно над ним (z-index?).

Таблица без отображения кнопки

Отображение кнопки при наведении на правую половинуячейка

Отображение кнопок при наведении на левую половину ячейки

Проблема с растягиванием кнопки на весь размер ячейки

.journal-form {
  margin: 0 0 -25px 0;
}

.journal-btn {
  border-radius: 0;
  padding: 0;
  height: 50px;
  width: 30px;
  opacity: 0.5;
}

.journal-btn-left:hover {
  background-color: #E74C3C;
}

.journal-btn-right:hover {
  background-color: #2ECC71;
}

<td>1. Иван Иванов</td>
<td class="p-0 journal-td">
  <div class="journal-grade">3</div>
  <div class="top-layer">
    <form class="form-group journal-form" action="journal-teacher.html" method="get">
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group container-fluid p-0" role="group" aria-label="First group">
          <button type="button" class="btn journal-btn journal-btn-left"></button>
          <button type="button" class="btn journal-btn journal-btn-right"></button>
        </div>
      </div>
    </form>
  </div>
</td>

Answer 1

Вы можете установить свои кнопки на position: absolute и сделать их шириной 50%, например:

.journal-td {
  position: relative;
}
.journal-td button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: red;
}
.journal-td button.journal-btn-right {
  left: auto;
  right: 0;
  background: green;
}

JSFiddle: https://jsfiddle.net/4ejqkfow/