table cell not interactive because of the content in it

Question

Calendar cells that have content inside are not fully interactive, unlike the empty cells. I can click on the date number only, the rest of the cell is being blocked by the content.

Content in the cell is ul for which I tried setting position to relative and add negative z-index. Also added positive z-index to td. Visually I can see that the ul goes further from the observer, but regardless the cell is still not fully interactive. I want to be able to click anywhere in the cell even if there is content in it. How could I achieve this?

HTML structure looks like this:

<td>
    <a href="#" ... >
        <span class="date">...</span>
    </a>
    <ul>
        <a href="#" ... ></a>
        <li>
            ...
        </li>
    </ul>
</td>

Screenshots:

Answer 1

It's hard to say what you are doing wrong without your CSS. However, I think the approach you should be taking to solve your issue should be,

• Absolute position your content, which is the ul tag. This would take the content out of the normal rendering flow.
• To make your whole cell clickable, make the a tag display:block and height: 100%.
• Since, the ul content is absolutely positioned, you would have to apply position: relative to the parent i.e td. Now, the content should be placed according to the cell so you could easily tweak its positioning.

The gist of the above would look something like this:

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}
ul {
 list-style: none;
}

table {
  table-layout: fixed;
  width:100%;
}
td {
  border: 1px solid;
  border-radius: 3px;
  height: 100px;
  padding: 10px;
  background: #3f3f3f;
  position: relative;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}

.cell {
    color: #f2f2f2;
    display: block;
    height: 100%;
}

.cell_list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}
.cell_list__item {
  background: #f9b42c;
  border-radius: 3px;
  padding: 3px 12px;
}

<table>
  <tr>
    <td>
        <a href="#" class="cell">
          <span>1</span>
        </a>
        <ul class="cell_list">
          <li class="cell_list__item">
          <a href="/another_link">content</a>
          </li>
        </ul>
    </td>
    <td>
        <a href="#" class="cell">
          <span>2</span>
        </a>
        <ul class="cell_list">
          <li class="cell_list__item">
          <a href="/another_link">content</a>
          </li>
        </ul>
    </td>
    <td>
        <a href="#" class="cell">
          <span>3</span>
        </a>
    </td>
  </tr>
</table>