用空超链接填充空间

Question

我想点击HTML表格单元格并打开新页面。如果我有文本到表销售，解决方案工作正常。但如果我有空单元格，则没有超链接。

tr.clickable td a {
    display: block;
    background: green;
    text-decoration:none;
}

如何使用空超链接填充单元格空间？

Answer 1

tr.clickable td a {
display: block;
background: green;
text-decoration:none;
}
tr.clickable td a:after{
  content: '';
  display: inline-block;
}

<table width="100%" border="1">
  <tr class="clickable">
<td>
  <a href=""></a>
</td>
  </tr>
</table>

另一种解决方案

您可以使用:empty伪元素。

tr.clickable td a:empty{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Answer 2

您可以将其设为固定min-height和min-width，例如：

tr.clickable td a {
   display: block;
   background: green;
   text-decoration:none;
   min-width:10px;
   min-height:10px;
}

修改

另一个解决方案是使用CSS content property与before或after伪元素，添加content: "\200B";，如下所示：

＆＃13;

＆＃13;

tr.clickable td a {
  display: block;
  background: green;
  text-decoration: none;
}
tr.clickable td a::before {
  content: "\200B";
}

＆＃13;

<table width="100%" border="1">
  <tr class="clickable">
    <td>
      <a href=""></a>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;