Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border.
Within this box, my goal is to insert tables with specific X and Y coordinates.
However, my issue arises when I resize the window, as the tables end up extending beyond the boundaries of the box.
Therefore, I am looking for a solution that allows the tables to maintain their positions while adjusting accordingly when the window size changes.
EDIT : To provide a visual representation of my desired outcome, please refer to the following sketch:
Below is the code snippet I am working with :
.box {
border: 5px solid red;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.content {
position: absolute;
resize: both;
}<div class="box">
<div class="content" style="left:700px; top:220px; z-index: 0;">
<table>
<thead>
<tr>
<th colspan="2">TITLE</th>
</tr>
</thead>
<tbody>
<tr>
<td>FUNCT1</td>
<td>John Doe</td>
</tr>
<tr>
<td>FUNCT2</td>
<td>John Doe</td>
</tr>
<tr>
<td>FUNCT3</td>
<td>John Doe</td>
</tr>
</tbody>
</table>
</div>
</div>If anyone can offer guidance on resolving this issue, it would be greatly appreciated. Have a wonderful day!