尽管有填充，但仍插入了 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 填充设置为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 在需要时仍会自然增长。