Make an a tag clickable anywhere in a td?

Question

I have a td that has a link inside of it and I want that link to be clickable anywhere within it's td:

{day} {d}

I found a way to make the whole width of the td clickable:

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

But when I go to do the same with the height it shifts everything. Is there a way to fill the entire vertical space of a td using this method or do I need to use a different method?

zer00ne · Answer

height conforms to the height of it's content (ie ). by default is an inline element which means that height does not apply to it as it does to a block element such as a

or

. In order to fill a with an entirely from edge to edge, apply the following styles:

td {padding: 0}
a {display: block; padding: 5px}

By default, has padding so that's space within the that wouldn't be covered by it's content, so it needs to be eliminated. The will behave as a block element but instead of explicitly setting a height, add padding to it on all sides.

In the example, there's a 3 column

with an in each of it's

. Click anywhere within any

and it should jump over to whatever

the is targeted to.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table,
td {
  border: 1px solid #000;
}

td {
  width: 33%;
  padding: 0;
  background: lightgrey
}

td:first-of-type a {
  color: red
}

td:nth-of-type(2) a {
  color: goldenrod
}

td:last-of-type a {
  color: blue
}

a {
  display: block;
  padding: 5px;
  text-align: center;
}

section {
  min-height: 100vh;
  background: linear-gradient(black 50%, white 100%)
}

#XXX {
  background: red
}

#YYY {
  background: gold
}

#ZZZ {
  background: blue
}

Make an a tag clickable anywhere in a td?

1 Answers