CSS <a> em todo o <td> é possível ? Não consegui com width e height

Arthur Guillermo · 8 de setembro de 2022

Estou querendo tornar o <td> um botão/a pois ainda não decidi como usarei (Pode ser possivelmente uma função em JS ou pode ser um request em GET/POST)

Até o momento tentei fazer o que vi de realizar <div> dentro de <a> para expandir porém o height não funciona, somente o width

Em css realizei o seguinte para tentar ocupar 100% do td:

table {
    width: 80%;
}
td{
    padding: 3px;
    text-align: center;
}
tr {
    top: 3px;
}
th {
    cursor: default;
}
td a{
    text-decoration: none;
    overflow: hidden;
    color:white;
    display: block;
}
td a div {
    width: 100%;
    height: 100%;
}
table, th, td {
    border: 1px solid gray;
    /*border-collapse: collapse;*/
    border-radius: 10px;
}
.amarelo-bg {
    background: linear-gradient(-45deg, RGB(165, 165, 1) 0%, #551A8B 100% );
    transform: translate3d(0px, 0px, 0);
    opacity: var(0.82);
    transition: opacity 0.3s;
    text-decoration: none;
    overflow: hidden;
}
.amarelo-bg:hover {
    color: #fff;
    box-shadow: 0 0 5px RGB(165, 165, 1), 0 0 25px RGB(165, 165, 1), 0 0 50px RGB(165, 165, 1), 0 0 100px #551A8B;
}

Já em HTML está neste formato:

<table>
	<tr>
  		<th>Data</th>
  		<th>Info</th>
  		<th>Icones</th>
  		<th>Status</th>
  	</tr>
  	<tr>
		<td></td>
		<td></td>
		<td class="icon"></td>
		<td class="amarelo-bg"><a href="#"><div>Pendente</div></a></td>
	</tr>
</table>

MailingTester · 8 de setembro de 2022

Olá!

Já que vai usar js, torne a td clicável, assim:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TDClickable</title>
  <style>
    td {
      border: thin solid #aaa;
    }

    td[data-href] {
      cursor: pointer
    }

    .viewer {
      font-family: monospace;
      white-space: pre;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>First TD</td>
      <td class='amarelo-bg' title="Título da cell" data-href='qualquer-Pendente'>Pendente <div>outro conteúdo
          Pendente</div>
      </td>
      <td>Last TD</td>
    </tr>
    <tr>
      <td>First TD</td>
      <td class='amarelo-bg' data-href='qualquer-Potente'>Potente <div>outro conteúdo Potente</div>
      </td>
      <td>Last TD</td>
    </tr>
    <tr>
      <td>First TD</td>
      <td class='amarelo-bg' data-href='qualquer-Presente'>Presente <div>outro conteúdo Presente</div>
      </td>
      <td>Last TD</td>
    </tr>
  </table>
  <div class="viewer"></div>
  <script>
    const handleTDClick = (e) => {
      // define o conteúdo do data-href
      const href = e.currentTarget.dataset.href

      document.querySelector('div.viewer').innerHTML = `REQUEST: api/${href}/save`
    }
    const clickableTDs = document.querySelectorAll('td[data-href]');
    for (const clickableTD of clickableTDs) {
      clickableTD.addEventListener('click', handleTDClick)
    }
  </script>
</body>

</html>