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

Question 1

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

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

Question 2

您需要对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>

例子在这里

Question 3

在块元素上设置任意大的负边距和相同的填充，并在父元素上隐藏溢出。

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/RXHuE/213/

Question 4

聚会晚了一点，但是我刚刚发现了一个不错的解决方案。

您可以结合使用相对和绝对定位的元素以及伪元素来获得所需的效果。无需额外的标记！

将表格单元格（<td>）更改为position: relative;，并在标记上创建一个::before 或 ::after伪元素<a>，并将其设置为position: absolute;，然后使用top: 0; left: 0; right: 0; bottom: 0;。

由于伪元素已附加到锚定标记，并且您要告诉它占用整个表单元格，因此它将迫使锚定标记至少具有该大小，而不会影响锚定标记本身的实际内容（从而保持其垂直居中对齐）。

例如

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  position: relative;
  width: 200px;
  padding: 0.5em 1em;
  border: 2px solid red;
  
  background-color: lime;
}

td a {
  /* FONT STYLES HERE */
  text-decoration: none;
}

td a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

<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>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 5</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 6<br>
        second line</a>
      </td>
    </tr>
  </tbody>
</table>

展开摘要

希望这可以帮助！

Question 5

以下骇客作品[在Chrome / Firefox / Safari上测试]具有相同的td和anchor元素填充。对于锚点，也具有等于填充值-ve的余量。

的HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS：

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

工作小提琴：http : //jsfiddle.net/JasYz/

Question 6

尝试display: block：

td a {display: block; height:100%;}

[编辑] WTF ...我可以确认这在FF 4和Chrome中不起作用。这有效：

td a {display: block;  height: 2.5em; border: 1px solid red;}

这表明height:100%;未在表单元格中定义。可能是因为单元格从内容中获取了它的大小（所以内容不能说“告诉我您的大小”，因为那样会导致循环）。如果像这样设置单元格的高度，它甚至将无法工作：

td {width: 200px; height: 3em; padding: 0px}

同样，上面的代码将失败。因此，我的建议是为链接使用定义的高度（您可以忽略宽度；默认情况下，块元素的宽度为100％）。

[EDIT2]我已经在http://www.cssplay.co.uk/menus/上浏览了一百个示例，但是它们都没有混合使用单行和多行单元格。好像您碰到了盲点。

Question 7

正如我对自己的问题所做的一样，我将在此处发布相同的答案。

受Jannis M的回答启发，我做了以下工作：

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

我添加了一个 因为空链接（不包含文本节点）不能设置样式（？）。

请参阅我更新的小提琴。

Question 8

唯一的问题是使用display：块会强制浏览器忽略垂直align：center ...

哎呀

我判断它是否正确，以找到一个高度为60的单元格，并通过添加一个br来占据20像素的字体。然后我意识到我有一些2行文字的项目。ang

我最终使用了javascript。javascript并没有给出很好的鼠标指向性单击器，但是文本行却显示了，因此它实际上会触发视觉响应，而不是我想要的位置...然后，JavaScript将捕获所有“未命中的单击”实际的href。

也许不是最优雅的解决方案，但目前为止效果很好。

现在，如果我只能弄清楚如何正确执行此操作...。

关于如何将鼠标图标添加到onclick覆盖区域的手的任何想法？现在，单击页面有效，但是仅当图标单击href时才更改，这只会影响文本。

Question 9

对我来说，唯一的解决方案是<table> <tr>用<div>s替换并使用display:table和display:table-row相应地设置样式。

然后，您可以<td>用just替换<a>并用设置样式display:table-cell。

即使在不同高度的<td>内容上也能完美工作。

因此原始HTML没有锚点：

<table>
  <tr>
    <td>content1<br>another_line</td>
    <td>content2</td>
  </tr>
</table>

现在变成：

a:hover
{
  background-color:#ccc;
}

    <div style="display:table; width:100%">
      <div  style="display:table-row">
        <a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a>
        <a href="#" style="display:table-cell; border:solid 1px #f00">content2</a>
      </div>
    </div>

展开摘要

Question 10

我已经使用了这种解决方案：在我的情况下，效果要比其余的更好。

CSS：

.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}

a.blocktd {margin: 0em;  padding: 50px 20px 50px 20px; display: block;}

a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition:  0.2s;}

在HTML中： <a href="..." class="blocktd">...</a>

Question 11

您为什么不只摆脱<a>高音扬声器而直接将其添加onClick到<td>？

<head>
<style type="text/css">
td {
    text-align:center;
}
td:hover {
    cursor:pointer;
    color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
            <td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
            <td onclick="location.href='http://www.google.com/';">Cell 3</td>
            <td onclick="location.href='www.google.com';">Cell 4</td>
        </tr>
    </tbody>
</table>

这样，您可以裁掉中间人。

PS：我知道这是很多年前提出并回答的，但是以上答案都无法解决我的问题。希望这对某人有帮助。