Question

我有一个数据表，每个单元格都是一个链接。我想允许用户单击表格单元格中的任意位置并让它们按照链接进行操作。有时表格单元格不止一行，但并非总是如此。我使用td a {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>

Answer 1

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

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

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

Answer 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%;
}

但除{IE和FF

外，将height设为50px适用于Chrome

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>

该示例列出here

Answer 3

以下黑客行为[在Chrome / Firefox / Safari上测试] 对td和锚元素使用相同的填充。并且对于锚也具有等于填充值的-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/

Answer 4

晚会很晚，但我发现了一个很好的解决方案。

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

将表格单元格（<td>）更改为position: relative;，并在::before代码上创建::after或<a>个伪元素，然后设置它是position: absolute;，也是top: 0; left: 0; right: 0; bottom: 0;。

因为伪元素附加到锚标记，并且您告诉它占用整个表格单元格，它将强制锚标记至少为该大小，同时不影响锚点的实际内容标记本身（从而保持其中心对齐）。

例如

HTML：

<table>
  <tr>
    <td>
      <a>I'm centralised</a>
    </td>
    <td>
      <a>I'm 100% width</a>
    </td>
    <td>
      <a>AND I'm 100% height</a>
    </td>
    <td>
      <a>WITHOUT extra markup</a>
    </td>
    <td>
      <a>OR JavaScript!</a>
    </td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse;
  table-layout: fixed;
}
td {
  position: relative;
  width: 150px;
  border: 2px solid red;
}
td a {
  padding: 0.5em 1em;
}
td a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

希望这有帮助！

Answer 5

尝试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/的一百个例子，但没有一个混合单行和多行单元格。好像你遇到了一个盲点。

Answer 6

我将在此处发布相同的答案，就像我在my own question上所做的那样。

受Jannis M answer的启发，我做了以下事情：

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

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

请参阅我更新的fiddle。

Answer 7

你可以使用一点点javascript。

  <td onclick="window.location='http://www.google.com/'">
    <a href="http://www.google.com/">Cell 3</a>
  </td>

或者，你可以创建一个完全填充单元格的元素（div，span，等等）并包裹你的大隐形元素。

  <td>
    <a href="http://www.google.com/">
      <div style="width:100%; height:100%;">Cell 1<br>
      second line
      </div>
    </a>
  </td>

Answer 8

这里唯一的问题是使用display：block强制浏览器忽略垂直对齐：center ...

糟糕。

我陪审团操纵它看起来正确的一个单元格高度：60和一个字体占用20像素通过添加br ...然后我意识到我有一些2行文字的项目。荡。

我最终使用了javascript。 javascript没有提供漂亮的鼠标尖头点击器的东西，但文本行确实如此，所以它实际上会触发视觉响应，而不是我想要它...然后Javascript将捕获所有点击的错过'实际的href。

也许不是最优雅的解决方案，但它现在运作良好。

现在，如果我只能弄清楚如何以正确的方式做到这一点......

有关如何添加鼠标图标的任何想法更改为onclick所涵盖区域的手牌？现在，点击页面可以正常工作，但只有在点击仅影响文本的href时图标才会发生变化。

Answer 9

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

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>

Answer 10

为什么不放弃<a> altogheter并直接向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：我知道这是多年前被问及回答的，但上面的答案都没有解决我的问题。希望这有助于某人。

Answer 11

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

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

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

如此原始的html没有锚：

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

现在变为：

＆＃13;

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

＆＃13;

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

＆＃13;

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

11 个答案: