如何在具有超链接时使整个表格单元格可点击 - 使用引导程序 v3答案

【问题标题】：How to make entire table cell clickable when it has a hyperlink - using bootstrap v3如何在具有超链接时使整个表格单元格可点击 - 使用引导程序 v3
【发布时间】：2016-11-01 01:03:08
【问题描述】：

这就是我尝试的方法，但它不起作用

唯一的是，它得到 100% 的宽度等于表格单元格的宽度，但高度没有改变。如何使整个表格单元格可点击？

我在做什么

  <td><a href="Default.aspx?ClusterId=1" class="btn-full">click here</a></td>

这是在我的 CSS 文件中

    .btn-full {
    display: block;
    width: 100%;
    height: 100%;
}

我使用的引导版本是 v 3.3.6

我正在使用最新版本的 chrome 进行测试：版本 51.0.2704.106 m

【问题讨论】：

尝试将 class="btn btn-default" 添加到
@onedevteam.com 试过还是不行：D i.snag.gy/uqIHT9.jpg
并从中删除 btn-full？
@onedevteam.com 刚刚尝试这里没有改变：i.snag.gy/ShWlQ2.jpg

【解决方案1】：

在您的情况下，由于同一行中的其他 td 具有更多内容，因此您需要使所有 td 内容的高度相同。下面的代码应该适用于上述问题。

td{overflow:hidden;
   .btn-full {
    display: block;
    width: 100%;
    height: 100%;
    margin:-1000px;
    padding: 1000px;
}

【讨论】：

但这很可能会破坏响应能力，对吧？
它不会破坏响应能力。它将正常运行表的工作方式。只是您的 td 内容将具有相同的高度。

【解决方案2】：

试试这个

 
td a{
      width:100%;
      line-height:40px;
      display:inline-block;
      vertical-align:middle;
}

<table border="1">
  <tr>
    <td>heading 1</td>
    <td>heading 2 with extra space</td>
    <td>heading 3</td>
    <td>heading 4</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

【讨论】：

高度还是一样的。我希望超链接的高度与表格单元格高度相同
更新了答案@MonsterMMORPG

【解决方案3】：

可能有这个。

td{
  position:relative;
}
td a{
  display: block;
  text-align: center;
  padding: 10em;
  margin: -10em;
}

<table border="1">
  <tr>
    <td>this is heading of cell 1</td>
    <td>this is heading of cell 2</td>
    <td>this is heading of cell 3</td>
    <td>this is heading of cell 4</td>
  </tr>
  <tr>
    <td>one<br>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td><a href="#">Two</a></td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

【讨论】：

好吧，我仍然需要保持移动体验的响应能力。这会破坏它吗？
不，它不会因为<a> 是根据其<td> 放置的，<td> 也将在响应中出现，无论大小如何。
是的，我刚试过，但这打破了垂直对齐中间:(
不，我的意思是我想显示文本垂直对齐中间。这里会发生什么：orig11.deviantart.net/8fcf/f/2016/181/f/f/…
ty 以获得更新的答案。仍然只有文本部分是可点击的：D i.snag.gy/RtVHkQ.jpg 如果您运行 sn-p 并通过 chrome 进行分析，您将看到相同的 :)