CODEWITHSUNDEEP
htmlcsshtml-table
YungOne
YungOne

Reputation: 133

Make an a tag clickable anywhere in a td?

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

<td><span class='date'><a class='day-link' href='{self.year}-{self.month}-{day}'>{day}</a></span><ul> {d} </ul></td>

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

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

enter image description here

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?

enter image description here

Upvotes: 1

Views: 203

Answers (2)

zer00ne
zer00ne

Reputation: 43895

<td> height conforms to the height of its content (ie <a>). <a> 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 <div> or <section>. In order to fill a <td> with an <a> entirely from edge to edge, apply the following styles:

td {padding: 0}
a {display: block; padding: 0 0 33% 0}

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

In the example, there's a 3 column <table> with an <a> in each of its <td>. Click anywhere within any <td> and it should jump over to whatever <section> the <a> 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: 0 0 33% 0;
}

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

#XXX {
  background: red
}

#YYY {
  background: gold
}

#ZZZ {
  background: blue
}
<table>
  <tr>
    <td>
      <a href="#XXX">XXX</a>
    </td>
    <td>
      <a href="#YYY">YYY</a>
    </td>
    <td>
      <a href="#ZZZ">ZZZ</a>
    </td>
  </tr>
</table>
<section></section>
<section id="XXX"></section>
<section></section>
<section id="YYY"></section>
<section></section>
<section id="ZZZ"></section>

Upvotes: 1

T-S
T-S

Reputation: 747

If it's only about showing the content (not selecting it or something) you could position the anchor element over the whole <td>. That way the user will always click the link inside the td.

td { 
  position: relative; 
  border: 1px solid black;
}

td a { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}
<table>
<tr>
  <td><span class='date'><a class='day-link' href='{self.year}-{self.month}-{day}'>{day}</a></span><ul> {d} </ul></td>
  <td><span class='date'><a class='day-link' href='{self.year}-{self.month}-{day}'>{day}</a></span><ul> {d} </ul></td>
</tr>
</table>

Upvotes: 1

Related Questions