Введено заполнение ячеек таблицы HTML несмотря на заполнение: 0

Question

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

Рассмотрим эту скрипку: https://jsfiddle.net/aq9Laaew/64614/

tr.table-href > td {
	padding: 0;
}

a.table-href {
	padding: 0.75rem;
	display: block;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Col 1</th>
          <th scope="col">Col 2</th>
          <th scope="col">Col 3</th>
          <th scope="col">Col 4</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-href">
          <td>
            <a class="table-href" href="#">Much much longer val than usual</a>
          </td>
          <td>
            <a class="table-href" href="#">Val 2</a>
          </td>
          <td>
            <a class="table-href" href="#">Some value 3</a>
          </td>
          <td>
            <a class="table-href" href="#">Some value 4</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>  
</div>

Как вы можете видеть, я устанавливаю td padding в 0, чтобы a внутри мог заполнить содержимое, таким образом делая всю ячейку кликабельной. Однако, когда некоторые ячейки слишком широки и обернуты, в более короткие ячейки вставляется нижний отступ, несмотря ни на что, хотя инструменты разработчика Chrome говорят мне, что их нет:

Вопрос: как мне избавиться от этого заполнения и сделать так, чтобы a внутри полностью заполнял таблицу ячеек?

Answer 1

Можно сделать так:

tr.table-href > td {
  height: 1px;
  padding: 0;
}

a.table-href {
  display: block;
  height: 100%;
  padding: 0.75rem;
}

Установка для td высоты позволит a использовать процентную высоту, но td будет естественным образом расти при необходимости.