After reading numerous recommendations on the subject, none of them seem to be effective in my particular situation.
The issue lies with a table that is nested within a container ('div' element) as shown below:
<div class="container">
<table>
<tr>
<td><img src="../img/3.jpg"></td>
<td colspan="3"><img src="../img/4.jpg"></td>
</tr>
<tr>
<td rowspan="2"><img src="../img/5.jpg"></td>
<td><img src="../img/1.jpg"></td>
<td rowspan="2" colspan="2"><img src="../img/2.jpg"></td>
</tr>
<tr>
<td><img src="../img/6.jpg"></td>
</tr>
</table>
</div>
Despite trying various methods such as using display: fixed, adjusting widths, and more, I am unable to contain the table within the div. It continues to overflow out of its designated space without adhering to any adjustments I make.
I'm uncertain of what may be causing this issue. Below is the CSS code for the container which should provide ample room for the table on my website:
.container {
display: inline-block;
width: 400px;
height: 200px;
border: 1px solid black;
}
UPDATE:
As per request, here is the full code of the mentioned website:
UPDATE 2:
CSS styles for the table/container have been modified:
Following the previous update, the 'overflow: auto;' property has been added to the 'container' class, making progress towards resolving the issue. Additional id's will be implemented for content organization.
.container {
display: inline-block;
width: 400px;
overflow: auto;
border: 1px solid black;
}
table {
height: 200px;
width: 600px;
table-layout:fixed;
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 50px;
width: 50px;
padding: 0px;
}
table img {
margin: 0px;
height: 60px;
width: 90px;
}