Home/ Questions/Q 3270800
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T18:40:18+00:00

I have a table of data and each cell is a link. I want

  • 0

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. 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/:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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