盡管填充了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仍會自然增長。