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