My goal is to make a div with the position: fixed property have the same width as its parent element, which is a td.
However, I am having trouble achieving this. Here is my current code:
HTML:
<table style="width: 90%; border: 1px solid black;">
<tr>
<td id='tdLeft'>
fdsfsdfsd<br><br><br><br><br><br><br><br>
fdsfsdfsd<br><br><br><br><br><br><br><br>
fdsfsdfsd<br><br><br><br><br><br><br><br>
fdsfsdfsd<br><br><br><br><br><br><br><br>
fdsfsdfsd<br><br><br><br><br><br><br><br>
</td>
<td id='tdRight'>
fdsfsd
<br>
rfeoif jerofj eriof
<div id='divFixed'>
hahaha, fdsfsd, fsdfsd, fdsfds, fdsfaaasd, fdfsdss,
hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd,
hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd
</div>
</td>
</tr>
</table>
CSS:
#tdLeft, #tdRight {
margin: 0;
padding: 0;
border-spacing: 0px;
border-collapse: collapse;
vertical-align: top;
}
#tdLeft {
position: relative;
width: 40%;
}
#tdRight {
position: relative;
width: 60%;
background-color: green;
}
#divFixed {
position: fixed;
border: 1px solid black;
top: 100px;
width: inherit;
}
Therefore, the small black box should match the width of the green td element.
Jsfiddle link: https://jsfiddle.net/jpovqd4u/2/
Although using position: sticky works in terms of width, it does not remain sticky due to multiple wrapping divs and lacks browser compatibility.