尽管填充了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

可以这样：

btnStartLoop.addMouseListener(new MouseAdapter() {
    @Override
    public void mouseDown(final MouseEvent e) {
        final Runnable update = new Runnable() {
          public void run()
          {
            text.setText("Text has been set");

            Display.getDefault().timerExec(1000, this);
          }
        };
        Display.getDefault().timerExec(0, update);
    }
});

将tr.table-href > td { height: 1px; padding: 0; } a.table-href { display: block; height: 100%; padding: 0.75rem; } 设置为高度将允许td使用百分比高度，但是a仍会在需要时自然增长。