Предотвращение роста элемента 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>
Ответы 1
Чтобы запретить родителям изменять размер в соответствии с содержащимся элементом, вы должны сделать три вещи:
- Установить родительскую позицию относительной
- Установите дочернюю позицию на абсолютную (и поместите в соответствующее место, используя верхнюю, нижнюю, левую, правую)
- Установите 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;
}
Нажмите здесь чтобы увидеть полный пример