Пусть дочерний элемент td занимает всю ширину и высоту - PullRequest
Новая
       6

Пусть дочерний элемент td занимает всю ширину и высоту

4 голосов
/ 07 октября 2019

У меня есть элемент <td> с небольшим отступом, и я хотел бы заштриховать всю ячейку таблицы, когда ее непосредственный дочерний элемент - элемент <mark>.

Я используюУценка для создания самой таблицы, поэтому просто добавить класс, такой как <td class="highlight">, на самом деле не вариант.

Базовая настройка таблицы

Вот базовая настройка таблицы 

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

С некоторыми простыми CSS 

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

Попытка # 1

Одна идея состояла в том, чтобы абсолютно позиционировать элемент <mark> и прикрепить его ко всем четырем сторонам: 

td > mark {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 8px;
}

Однако, не представляется возможным установить родительскую высоту родительского элемента для абсолютно позиционированного дочернего элемента , поэтому содержимое переполняет <td>

example one

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

td > mark {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 8px;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

Попытка # 2

Другая идея состояла в том, чтобы отменить заполнение с отрицательным полем, как это: 

td > mark {
    display: block;
    margin: -8px;
    padding: 8px;
}

Однако, если в другой ячейке есть перенос строки, я не могу заставить дочерний элемент занимать всю доступную высоту

example two

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

td > mark {
    display: block;
    margin: -8px;
    padding: 8px;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>

В: Есть ли другие способы сделать это возможным?

Ответы [ 2 ]

2 голосов
/ 07 октября 2019

Используйте большой box-shadow и скрыть переполнение 

table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
}
td {
 overflow:hidden;
}
td > mark {
  display:inline-block;
  box-shadow: 0 0 0 50px yellow; 
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>
2 голосов
/ 07 октября 2019

Я предлагаю зациклить все метки и добавить bg желтого цвета к их родителям: 

document.querySelectorAll('mark').forEach(function(item){
  item.parentElement.style.backgroundColor ="ff0";
});

codepen: https://codepen.io/HBA/pen/BaayQOL

...