使表格单元格中的链接填充整个行高

小编典典

使表格单元格中的链接填充整个行高

html

我有一个数据表，每个单元格都是一个链接。我想允许用户单击表格单元格中的任何位置，并让他们点击链接。有时表单元格不止一行，但并非总是如此。我使用td{display：block}来获得覆盖大部分单元格的链接。当一行中有一个单元格为两行，而其他单元格只有一行时，一个衬板不会填满表格行的整个垂直空间。这是示例HTML，您可以在上看到它的运行方式：

<head>
<style type="text/css">
  td {width: 200px}
  td a {display: block; height:100%; width:100%;}
  td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>
</body>

阅读 290

2020-05-10

共1个答案

小编典典

您需要对CSS进行一些小的更改。使之td height:100%;适用于IE 8和FF 3.6，但不适用于Chrome。

td {
  width: 200px;
  border: solid 1px green;
  height: 100%
}
td a {
  display: block;
  height:100%;
  width:100%;
}

但要做出height对50px作品的Chrome除了IE和FF

td {
  width: 200px;
  border: solid 1px green;
  height: 50px
}
td a {
  display: block;
  height:100%;
  width:100%;
}

编辑：

您已在此处的另一篇文章中自己给出了解决方案；这是要使用的display:inline-block;。与我的Chrome，FF3.6，IE8解决方案结合使用时

td {
  width: 200px;
  border: solid 1px green;
  height: 100%}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}

更新资料

以下代码在IE8，FF3.6和chrome中对我有效。

的CSS

td {
  width: 200px;
  border: solid 1px green;
  height: 100%;
}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}
td a:hover {
  background-color: yellow;
}

的HTML

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>

2020-05-10