https://i.sstatic.net/SpG52.png
The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet:
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered">
<tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
</body>
CSS:
table {
width:500px;
height:500px;
position: absolute;
left: 37.25%;
top: 20%;
table-layout: fixed;
}
td {
border:2px solid #428bca;
height:100px;
width: 100px;
}
tr {
background-color:white;
}
Is there a solution to correct this issue? Thank you for taking the time to read! Edit: Here is the desired appearance of the table:https://i.sstatic.net/25a42.png