Проблема с абсолютным позиционированием строки сверху другой строки в таблице ⇐ Html

[Anonymous]

У меня есть стол с видимыми рядами и скрытыми рядами. Скрытые ряды должны появляться в верхней части видимых строк с тем же позиционированием элементов TD.
Однако при использовании абсолютного позиционирования в скрытой строке его изменение ширины. />

Код: Выделить всё

hr {margin-block: 5rem}

table {
border-collapse: collapse;
width: 70%;
margin-inline: auto;
}

tbody {
position: relative;
}

td {
padding: 15px
}

.visible-line {
background: deeppink;
z-index: 1;
}

.invisible-line {
background: plum;
z-index: 10;
}

.visible-line:hover+.invisible-line.display-none,
.invisible-line.display-none:hover {
display: table-row;
inset: 0;
background: LavenderBlush;
}

.display-none {
display: none
}

.position-absolute {
position: absolute;
}

.full-width {
width: 100%
}< /code>

Hover example


03/06/2025
John Doe
Doctor






Doctor
Writer









tr with absolute positioning


03/06/2025
John Doe
Doctor






Doctor
Writer









tr with absolute positioning & full width


03/06/2025
John Doe
Doctor






Doctor
Writer









tr by default appearing with mouse on the first tr   

03/06/2025
John Doe
Doctor






Doctor
Writer









tr with absolute positioning appearing with mouse on the first tr


03/06/2025
John Doe
Doctor






Doctor
Writer









tr with absolute positioning and full width appearing with mouse on the first tr  

03/06/2025
John Doe
Doctor






Doctor
Writer

Я спрашиваю помощь перед рефакторией моего HTML -кода.

Подробнее здесь: https://stackoverflow.com/questions/796 ... in-a-table