How to make a tag with dynamic content full height inside of td tag

Question

I have a table where I load dynamic content, and I want that the content inside the cells is the same height as the cells! Precisely I have "a" elements with some text, inside the td cells. I get a problem when the text in a cell is long and goes at newline, and like you can see in the image the other "a" elements in the table row don't fit the full height of the cell.

See the live Demo

Here is the code

HTML

<table class="table" cellspacing="0">
<thead>
    <tr>
        <th>Data</th>
        <th>Titolo</th>
        <th>Sede</th>
        <th>Città</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a href="eventi.php?id=17">12/02/2015</a>
        </td>
        <td><a href="eventi.php?id=17"><span class="fixed glyphicon glyphicon-flag"></span>asd</a>
        </td>
        <td><a href="eventi.php?id=17">ada</a>
        </td>
        <td><a href="eventi.php?id=17">asdas</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=13">04/02/2015</a>
        </td>
        <td><a href="eventi.php?id=13"><span class="fixed glyphicon glyphicon-flag"></span>ada</a>
        </td>
        <td><a href="eventi.php?id=13">prova</a>
        </td>
        <td><a href="eventi.php?id=13">asda</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=12">07/09/2017</a>
        </td>
        <td><a href="eventi.php?id=12">Evento Lignano <br>
  sabbiadoro</a>
        </td>
        <td><a href="eventi.php?id=12">Palazzetto dello Sport</a>
        </td>
        <td><a href="eventi.php?id=12">Perugia</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=54">09/09/2015</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
        <td><a href="eventi.php?id=54">aaa</a>
        </td>
    </tr>
    <tr>
        <td><a href="eventi.php?id=25">09/03/2015</a>
        </td>
        <td><a href="eventi.php?id=25">sfsd</a>
        </td>
        <td><a href="eventi.php?id=25">ada</a>
        </td>
        <td><a href="eventi.php?id=25">dadasd</a>
        </td>
    </tr>
</tbody>

CSS

table{
    width:400px;
}
td a{
    background:#ff0;
    display: block;
    padding:20px;
    box-sizing:border-box;
    height: 100%;
    width: 100%;
}

td{
    height:100%;
    position: relative;
}

table {
  width: 400px;
}
td a {
  background: #ff0;
  display: block;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
td {
  height: 100%;
  position: relative;
}

<table class="table" cellspacing="0">
  <thead>
    <tr>
      <th>Data</th>
      <th>Titolo</th>
      <th>Sede</th>
      <th>Città</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="eventi.php?id=17">12/02/2015</a>
      </td>
      <td><a href="eventi.php?id=17"><span class="fixed glyphicon glyphicon-flag"></span>asd</a>
      </td>
      <td><a href="eventi.php?id=17">ada</a>
      </td>
      <td><a href="eventi.php?id=17">asdas</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=13">04/02/2015</a>
      </td>
      <td><a href="eventi.php?id=13"><span class="fixed glyphicon glyphicon-flag"></span>ada</a>
      </td>
      <td><a href="eventi.php?id=13">prova</a>
      </td>
      <td><a href="eventi.php?id=13">asda</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=12">07/09/2017</a>
      </td>
      <td><a href="eventi.php?id=12">Evento Lignano <br>
  sabbiadoro</a>
      </td>
      <td><a href="eventi.php?id=12">Palazzetto dello Sport</a>
      </td>
      <td><a href="eventi.php?id=12">Perugia</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=54">09/09/2015</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
      <td><a href="eventi.php?id=54">aaa</a>
      </td>
    </tr>
    <tr>
      <td><a href="eventi.php?id=25">09/03/2015</a>
      </td>
      <td><a href="eventi.php?id=25">sfsd</a>
      </td>
      <td><a href="eventi.php?id=25">ada</a>
      </td>
      <td><a href="eventi.php?id=25">dadasd</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Here is a little hack I've used in the past.

You can essentially add a pseudo element to the a element and absolutely position it relative to the closest td element. Since the pseudo elements are essentially children elements of the a element, when you click the pseudo element, you are inadvertently clicking the a element.

Updated Example

td a:after, td a:before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}
td a:after {
  background: #ff0;
  z-index: -1;
}