Предотвращение роста элемента td для соответствия дочерним элементам

Я пытаюсь создать таблицу с раскрывающимися информационными вкладками, которые появляются при прокрутке термина. Мой первоначальный подход заключался в том, чтобы эти информационные вкладки не отображались с помощью правила display : none css, а затем когда пользователь наводит указатель мыши на соответствующий текст, появляется вкладка информации, изменяя свойство отображения на display: block.

Моя проблема в том, что я не могу понять, как переопределить поведение по умолчанию для содержащего/родительского элемента, и размер таблицы изменяется, чтобы соответствовать вновь появившемуся элементу, а затем возвращается к нормальному размеру, когда пользователь прокручивает. Я экспериментировал с z-index (устанавливая td на z-index: 1 и вкладку информации на z-index: 2), а также visibility:hidden -> visibility:visible против display:none -> display:block, но ни с одним из них не повезло. Я также попытался установить максимальную высоту элемента td на 200 пикселей, но, похоже, она все равно превышает это значение.

Вот исходный код того, что у меня есть до сих пор:

/* In an attempt to prevent row from expanding automatically */

td {
  max-height: 100px;
}

.card-body {
  display: none;
  border: 2px solid black;
  height: 300px;
  width: 400px;
  z-index: 2;
}

.card-trigger:hover+.card-body {
  display: inline-block;
  position: relative;
  top: 0px;
  right: 15px;
}

.card-body:hover {
  display: block;
}

.card-body .game-info {
  display: none;
}

.card-body .dd-trigger:hover+.game-info {
  display: block;
}
<h3>Ratings by som bol</h3>
<p>sort by release date (asc/desc), rating amout, game category, game creator, game console</p>
<input type = "text" placeholder = "filter by game title, categories, creators, consoles, console makers">
<div>Search hints</div>
<table class = "table">
  <thead>
    <tr>
      <th>Game title</th>
      <th>your rating</th>
      <th>Average rating</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <!-- Row 1 -->
    <tr>
      <td>
        <a class = "card-trigger" href = "#">Some Videogame</a>
        <div class = "card-body">

          <img src = "#" alt = "picture of the game in question" />
          <h3><a [routerLink] = "">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class = "dd-trigger">Show more info</span>
          <ul class = "game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <a class = "card-trigger" href = "#">Some Videogame</a>
        <div class = "card-body">

          <img src = "#" alt = "picture of the game in question" />
          <h3><a [routerLink] = "">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class = "dd-trigger">Show more info</span>
          <ul class = "game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
    <!-- row 3 -->
    <tr>
      <td>
        <a class = "card-trigger" href = "#">Some Videogame</a>
        <div class = "card-body">

          <img src = "#" alt = "picture of the game in question" />
          <h3><a [routerLink] = "">Game title</a></h3>
          <p>Some stuff happens and you have fun</p>
          <span class = "dd-trigger">Show more info</span>
          <ul class = "game-info">
            <li>Average Rating: </li>
            <li>Average Review Score: </li>
          </ul>
        </div>
      </td>

      <td>
        your rating : 2
      </td>
      <td>
        average rating : 3
      </td>
      <td><button>Delete rating</button></td>
    </tr>
  </tbody>
</table>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
206
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы запретить родителям изменять размер в соответствии с содержащимся элементом, вы должны сделать три вещи:

  1. Установить родительскую позицию относительной
  2. Установите дочернюю позицию на абсолютную (и поместите в соответствующее место, используя верхнюю, нижнюю, левую, правую)
  3. Установите z-index дочернего элемента выше, чем у родительского. Мы делаем это, чтобы предотвратить перекрытие любых родительских стилей дочерними стилями. По сути, это заставляет дочерний элемент выглядеть так, как будто он находится поверх родительского элемента.

html — это тривиальный пример таблицы с одной строкой. css по умолчанию скрывает содержащийся дочерний элемент div и устанавливает блокировку отображения при наведении курсора в дополнение к стилям по умолчанию и упомянутому выше позиционированию/z-индексу.

table, th, td {
  border: 1px solid black;
}

.pop-up {
  display: none
}

td {
  position: relative;
}

td:hover > .pop-up {
  display: block;
}

.pop-up {
  width: 500px;
  height: 100px;
  background: red;
  border: 1px solid black;
  position: absolute;
  left: 50px;
  z-index: 1;  
}

нажмите здесь чтобы увидеть полный пример

Другие вопросы по теме