Make link in table cell fill the entire row height

后端未结

关注

 10  983

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 m

相关标签:

10条回答

忘掉有多难

2020-11-27 04:45

Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?

<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. Hope this helps someone.

0 讨论(0)

情话喂你

2020-11-27 04:46

Following hack works [Tested on Chrome / Firefox / Safari] Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.

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

Working Fiddle :http://jsfiddle.net/JasYz/

0 讨论(0)

耶瑟儿～

2020-11-27 04:46

I have used this solution: works better then the rest in my case.

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>

0 讨论(0)

無奈伤痛

2020-11-27 04:51

You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for 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

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;. This works when combined with my solution for 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.

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>

The example lays here

0 讨论(0)

上一页 1 2