Place link on whole table cell with CSS-CodePudding

I have a table created with divs only and would like to expand the link in the first cell to the whole cell area. Currently, the link is only placed on the text itself. It is important to keep the vertical alignment of the text in the middle of the cell.

How can I make the whole cell clickable?

div.divTable {
    border: 1px solid #000000;
    border-collapse: collapse;
}
.divTable.divTable .divTableCell, .divTable.divTable {
    border: 1px solid #000000;
    padding: 3px 3px;
    font-size: large;
    vertical-align: middle;
}

.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableCell { display: table-cell; }
.divTableBody { display: table-row-group;}

<div >
  <div >
    <div >
      <div >
        <a href="https://google.de">
          <div style="background-color: lightblue;">Google</div>
        </a>
      </div>
      <div >
        Dummy text line 1<br/>Dummy text line 1<br/>Dummy text line 3<br/>Dummy text line 4<br/>Dummy text line 5
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Making your anchor tag become divTableCell that is the easiest way

div.divTable {
  border: 1px solid #000000;
  border-collapse: collapse;
}

.divTable.divTable .divTableCell,
.divTable.divTable {
  border: 1px solid #000000;
  padding: 3px 3px;
  font-size: large;
  vertical-align: middle;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableCell {
  display: table-cell;
}

.divTableBody {
  display: table-row-group;
}

<div >
  <div >
    <div >
      <a  href="https://google.de">
        <div style="background-color: lightblue;">Google</div>
      </a>
      <div >
        Dummy text line 1<br />Dummy text line 1<br />Dummy text line 3<br />Dummy text line 4<br />Dummy text line 5
      </div>
    </div>
  </div>
</div>