尽管填充 : 0，但 HTML 表格单元格填充已插入

Question

我正在修改 Bootstrap 表以实现可点击的行。我觉得我离目标很近了，但是我遇到了单元格填充问题。

考虑这个 fiddle :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 开发工具告诉我没有:

问题:如何去掉这个padding，让里面的a完全填满cell table？

Answer 1

可以这样做:

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

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

将 td 设置为具有高度将允许 a 使用百分比高度，但 td 仍会在需要时自然增长.