Question

我正在使用一个（引导程序）表，我在其中一个单元格中放置了一个链接，它可能发生，实际链接文本为空，因此没有显示链接元素（或者更好地说用户可以＆＃ 39; t点击它）。现在的目标是，无论链接中是否有某些文本，链接元素都应占用整个单元格空间。

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

我尝试将a-tag的显示属性设置为 inline-table ，这对IE以外的大多数浏览器都有效。有没有一个漂亮，干净和交叉浏览器兼容的方法来实现这个目标？

Answer 1

给锚点display: block。然后它将采用其父级的全宽。

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

请注意，主播应该至少有一些＆＃39;在它。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

为列

设置min-width

<td style="min-width:50px"><a ...>Text that might be empty</a></td>

Answer 3

这可以使用/不使用文本。

.hasLink{
  position: relative;
  height: 38px;
}
.hasLink a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0px; //if you don't want to show any text
  padding: 8px 0 0 5px;
}

<tr>
  <td class="hasLink"><a href="#"></a></td>
  <td></td>
</tr>

HTMLTable：空链接元素应占用整个单元格空间

3 个答案: