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

Question

I have a table of data and each cell is a link.我有一个数据表，每个单元格都是一个链接。 I want to allow the user to click anywhere in the table cell and have them follow the link.我想允许用户单击表格单元格中的任意位置并让他们点击链接。 Sometimes the table cells are more than one line but not always.有时表格单元格不止一行，但并非总是如此。 I use td a {display: block} to get the link to cover most of the cell.我使用 td a {display: block} 来获取覆盖大部分单元格的链接。 When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row.当一行中有一个单元格是两行，而其他单元格只有一行时，一个衬垫不会填满表格行的整个垂直空间。 Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/ :这是示例 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

Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.在块元素上设置任意大的负边距和相等的填充，并在父元素上隐藏溢出。

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

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

Answer 2

You need a small change in your CSS.您需要对 CSS 进行一些小的更改。 Making td height:100%;制作td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.适用于 IE 8 和 FF 3.6，但不适用于 Chrome。

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

But making height to 50px works for Chrome in addition to IE and FF但是除了 IE 和 FF 之外，将height为50px适用于 Chrome

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

Edit:编辑：

You have given the solution yourself in another post here;您已经在另一篇文章中自己给出了解决方案； which is to use display: inline-block;这是使用display: inline-block; . . This works when combined with my solution for Chrome, FF3.6, IE8这与我的 Chrome、FF3.6、IE8 解决方案结合使用时有效

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

Update更新

The following code is working for me in IE8, FF3.6 and chrome.以下代码在 IE8、FF3.6 和 chrome 中对我有用。

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

The example lays here例子放在这里

Answer 3

Little late to the party, but there's a nice solution I just discovered.聚会有点晚了，但我刚刚发现了一个很好的解决方案。

You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for.您可以使用相对和绝对定位元素的组合，以及一个伪元素来获得您正在寻找的效果。 No extra markup needed!不需要额外的标记！

Change the table cell ( <td> ), to be position: relative;将表格单元格 ( <td> ) 更改为position: relative; , and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute; ，并在<a>标签上创建一个::before或::after伪元素，并将其设置为position: absolute; , and also use top: 0; left: 0; right: 0; bottom: 0; , 也使用top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0; . .

Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).因为伪元素附加到锚标签，并且你告诉它占据整个表格单元格，它会强制锚标签至少是那个大小，同时不影响锚标签本身的实际内容（从而保持其垂直居中对齐）。

For example例如

 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>

Hope this helps!希望这可以帮助！

Answer 4

Following hack works [Tested on Chrome / Firefox / Safari] Have the same padding for td and anchor elements.以下 hack 作品 [在 Chrome / Firefox / Safari 上测试] 对 td 和锚元素具有相同的填充。 And for anchor also have margin which is equal to -ve of padding value.并且对于锚点也有等于 -ve 填充值的边距。

HTML HTML

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

CSS: CSS：

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

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

Answer 5

Try display: block :尝试display: block ：

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

[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. [编辑] WTF ...我可以确认这在 FF 4 和 Chrome 中不起作用。 This works:这有效：

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

That suggests that height:100%;这表明height:100%; isn't defined in a table cell.未在表格单元格中定义。 Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop).也许这是因为单元格从内容中获取其大小（因此内容不能说“告诉我你的大小”，因为这会导致循环）。 It doesn't even work if you set a height for the cells like so:如果您像这样为单元格设置高度，它甚至不起作用：

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

Again the code above will fail.同样，上面的代码将失败。 So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).所以我的建议是为链接使用定义的高度（您可以省略宽度；对于块元素，默认情况下为 100%）。

[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. [EDIT2] 我在http://www.cssplay.co.uk/menus/ 上点击了一百个例子，但没有一个混合单行和多行单元格。 Seems like you hit a blind spot.看来你遇到了盲点。

Answer 6

I will post the same answer here, as I did on my own question .我会在这里发布相同的答案，就像我在我自己的问题上所做的一样。

Inspired by Jannis M 's answer , I did the following:受到Jannis M 回答的启发，我做了以下事情：

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

I added a  我加了一个  since empty links (not containing text nodes) can not be styled(?).因为空链接（不包含文本节点）不能设置样式（？）。

See my updated fiddle .请参阅我更新的小提琴。

Answer 7

Only problem here is that using display: block forces the browser to ignore the vertical align: center...这里唯一的问题是使用 display: block 会强制浏览器忽略垂直 align: center...

oops.哎呀。

I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text.我通过添加一个 br 来操纵它以寻找一个高度为 60 的单元格和一个占据 20 像素的字体......然后我意识到我有一些带有 2 行文本的项目。 Dang.党。

I ended up using the javascript.我最终使用了 javascript。 The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href. javascript 没有提供漂亮的鼠标尖点点击器的东西，但文本行会，所以它实际上会触发视觉响应，只是不在我想要的地方......然后 Javascript 将捕获所有“错过的点击” ' 实际的 href。

Maybe not the most elegant solution, but it works well enough for now.也许不是最优雅的解决方案，但它现在工作得很好。

Now if I could only figure out how to do this the right way....现在，如果我只能弄清楚如何以正确的方式做到这一点......

Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick?关于如何将鼠标图标更改添加到 onclick 覆盖区域的手的任何想法？ Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.现在，点击页面有效，但图标仅在点击仅影响文本的 href 时才会更改。

Answer 8

For me the only solution is to replace <table> <tr> with <div> s and style them using display:table and display:table-row accordingly.对我来说，唯一的解决方案是用<div>替换<table> <tr>并相应地使用display:table和display:table-row它们的样式。

Then you can replace <td> with just <a> and style it with display:table-cell .然后你可以用<a>替换<td>并用display:table-cell样式。

Work perfectly even on varying heights of <td> contents.即使在<td>内容的不同高度上也能完美工作。

so original html without anchors:所以没有锚的原始html：

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

now becomes:现在变成：

 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>

Answer 9

You can use a little javascript. 你可以使用一点点javascript。

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

Or, you can create an element which completely fills the cell (div, span, whatever) and wrap the around your big invisible element. 或者，您可以创建一个完全填充单元格的元素（div，span等），并围绕您的大隐形元素。

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

Answer 10

I have used this solution: works better then the rest in my case.我已经使用了这个解决方案：在我的情况下比其他解决方案效果更好。

CSS: 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;}

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

Answer 11

Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?你为什么不去掉<a>总和并直接向<td>添加一个onClick ？

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

This way you cut out the middle man.这样你就去掉了中间人。

PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. PS：我知道很多年前就有人问过并回答过这个问题，但上面的答案都没有解决我的问题。 Hope this helps someone.希望这可以帮助某人。

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

问题描述

10 个解决方案

解决方案1
108 2013-04-04 01:31:32

解决方案2
47 已采纳 2010-10-19 07:50:55

解决方案3
6 2017-09-03 12:54:52

解决方案4
4 2013-04-11 22:32:52

解决方案5
1 2010-10-19 07:10:58

解决方案6
1 2012-02-06 11:30:17

解决方案7
0 2013-03-16 09:31:26

解决方案8
0 2016-04-28 08:51:48

解决方案9
0 2010-10-19 07:10:25

解决方案10
0 2020-10-28 10:59:17

解决方案11
-1 2015-09-04 08:35:53

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

问题描述

10 个解决方案

解决方案1 108 2013-04-04 01:31:32

解决方案2 47 已采纳 2010-10-19 07:50:55

解决方案3 6 2017-09-03 12:54:52

解决方案4 4 2013-04-11 22:32:52

解决方案5 1 2010-10-19 07:10:58

解决方案6 1 2012-02-06 11:30:17

解决方案7 0 2013-03-16 09:31:26

解决方案8 0 2016-04-28 08:51:48

解决方案9 0 2010-10-19 07:10:25

解决方案10 0 2020-10-28 10:59:17

解决方案11 -1 2015-09-04 08:35:53

解决方案1
108 2013-04-04 01:31:32

解决方案2
47 已采纳 2010-10-19 07:50:55

解决方案3
6 2017-09-03 12:54:52

解决方案4
4 2013-04-11 22:32:52

解决方案5
1 2010-10-19 07:10:58

解决方案6
1 2012-02-06 11:30:17

解决方案7
0 2013-03-16 09:31:26

解决方案8
0 2016-04-28 08:51:48

解决方案9
0 2010-10-19 07:10:25

解决方案10
0 2020-10-28 10:59:17

解决方案11
-1 2015-09-04 08:35:53