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

你需要在你的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 适用于除IE和FF之外的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

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

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

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

以下黑客作品[在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/

参加聚会有点晚,但我发现了一个很好的解决办法。

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

更改表格单元格( <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;
}

希望这有帮助!

尝试 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%)。

[编辑2]我点击了上百个例子 http://www.cssplay.co.uk/menus/ 但没有一个细胞混合单行和多行。好像你碰到了盲点。

我会把同样的答案贴在这里,就像我在上面写的一样。 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(' ');  
    });       
});

我添加了一个   因为空链接(不包含文本节点)不能设置样式(?).

见我的更新 fiddle .

你可以使用一点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>

这里唯一的问题是使用display:block强制浏览器忽略垂直对齐:居中…

哎呀。

我认为它适合于一个高度为60的单元格和一个占20像素的字体,添加了一个br…然后我意识到我有一些带有两行文本的项目。Dang。

我最终使用了javascript。Javascript没有提供漂亮的鼠标尖点击功能,但是文本行提供了,所以它实际上会触发一个视觉响应,而不是我想要的地方……然后,javascript将捕获所有“错过”实际href的单击。

也许不是最优雅的解决方案,但目前它已经足够好用了。

如果我能找到正确的方法…

对于onclick覆盖的区域,如何将鼠标图标添加到手上有什么想法吗?现在,点击页面可以工作,但是图标只有在点击只影响文本的href时才会改变。

你为什么不把 <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>

这样你就摆脱了中间人。

附言:我知道这是多年前被问到和回答的,但上面的回答都没有解决我的问题。希望这能帮助别人。

对我来说,唯一的解决办法是更换 <table> <tr> 具有 <div> 并使用样式 display:table 和 display:table-row 因此。

那你就可以换了 <td> 用公正 <a> 并搭配 display:table-cell .

即使在不同高度的 <TD & GT; 内容。

所以没有锚定的原始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>