Как можно расширить ширину и высоту <a>до родительского <td>? - PullRequest
Новая
       9

Как можно расширить ширину и высоту <a>до родительского <td>?

0 голосов
/ 28 мая 2020

Я работаю над React, и элемент <a> в <td> должен быть расширен, чтобы соответствовать ширине и высоте <td>. Это означает, что когда я нажимаю элемент <td>, гиперссылка <a> должна работать должным образом. Как добиться такого поведения без свойства position? Я знаю, что свойство position может решить эту проблему, но при использовании этого свойства ситуация может быть хуже. Поэтому я хочу решить эту проблему без этого свойства.

HTML

<table>
  <tr>
    <td><a href="https://google.com">td1</a></td>
    <td><a href="https://google.com">td2</a></td>
    <td><a href="https://google.com">td3</a></td>
    <td><a href="https://google.com">td4</a></td>
  </tr>
</table>

CSS

td {
  border: 1px solid red;
  padding: 16px;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

td:hover a {
  color: purple;
}

Контекст

  • Я использую структуру CSS и не могу удалить padding из td
  • a должен покрывать width и height из td

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Используйте отрицательное поле, затем наследуйте отступ: 

td {
  border: 1px solid red;
  padding: 16px;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
  background:#f2f2f2;
  display:block;
  margin:-16px;
  padding:inherit;
}

td:hover a {
  color: purple;
}
<table>
  <tr>
    <td><a href="https://google.com">td1</a></td>
    <td><a href="https://google.com">td2</a></td>
    <td><a href="https://google.com">td3</a></td>
    <td><a href="https://google.com">td4</a></td>
  </tr>
</table>
0 голосов
/ 28 мая 2020 

td {
  border: 1px solid red;
  cursor: pointer;
  /* padding: 16px; //Remove padding and add it to a tag. */ 
}

a {
  display: block;
  padding: 16px;
  background: gray;
  text-decoration: none;
  color: inherit;

}

td:hover a {
  color: purple;
}
<table>
  <tr>
    <td><a href="https://google.com">td1</a></td>
    <td><a href="https://google.com">td2</a></td>
    <td><a href="https://google.com">td3</a></td>
    <td><a href="https://google.com">td4</a></td>
  </tr>
</table>

Если вам нужно сохранить свойство padding в теге td,

Есть только один вариант - position:absolute

...