Make link in table cell fill the entire row height

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 m

Answer 1

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 (), to be position: relative;, and create a ::before or ::after pseudo element on the tag, and set it to position: absolute;, and also use 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;
}

  

    

      

        Cell 1

        second line
      
      

        Cell 2
      
      

        Cell 3
      
      

        Cell 4
      
    
    

      

        Cell 5
      
      

        Cell 6

        second line
      
    
  

Hope this helps!