HTMLTable : Empty link element should take up whole cell space

Question

我正在使用一个( Bootstrap )表，我在其中一个单元格中放置一个链接，可能会发生这种情况，实际链接文本为空，因此不显示链接元素(或者更好的说法是用户可以'不要点击它)。现在的目标是，无论链接中是否有文本，链接元素都应占据整个单元格空间。

<table class="table table-bordered table-striped">
  <tr>
    <td><a ...>Text that might be empty</a></td>
  ...

我已经尝试将 a-tag 的 display 属性设置为 inline-table，它适用于除 IE 之外的大多数浏览器。是否有一种漂亮、干净且与跨浏览器兼容的方式来实现这一点？

Answer 1

给 anchor 一个display: block。然后它将占据其父级的整个宽度。

我已经为您制作了这个演示。通过单击该按钮，您将看到它是如何工作的。

请注意， anchor 中至少应该有“东西”。

$('button').click(function() {
  $('a').toggleClass('block');
});

td {
  border: 1px solid red;
}
tr, td {
  height: 100%;
}
a {
  background: blue; 
}
a.block {
  display: block;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#">&nbsp;</a></td>
    <td>Text<br />text</td>
  </tr>
  <tr>
    <td>Text text</td>
    <td>Text text</td>
  </tr>
</table>

<button>Toggle block</button>