What could be causing the misalignment of cells in the first row? JSfiddle link
Here is the code snippet:
.box3 {
margin: auto;
width: auto;
height: 300px;
}
.tb2 {
border-collapse: collapse;
color: black;
text-align: center;
margin-top: 10px;
margin-left: 10px;
width: 950px;
height: 300px;
display: inline-block;
overflow: auto;
}
.tb2 > tbody > tr > th {
border: 1px solid black;
background-color: black;
color: white;
font-weight: bold;
}
.tbd {
width: auto;
height: 330px;
background-color: white;
color: black;
overflow: auto;
display: block;
}
.tbd > tr > td {
border: 1px solid black;
width: 5%;
height: 100%;
}<div class="box3">
<table class="tb2">
<tr>
<th></th>
<th>Day</th>
<th>Theory Class</th>
<th>Practical Class</th>
<th>English Class</th>
<th>Start Time</th>
<th>End Time</th>
<th>Decription</th>
<th>Checked</th>
<th></th>
<th></th>
<tr>
<tbody class="tbd">
<tr>
<td>1</td>
<td>Mon</td>
<td>XXXXXXXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>hh:mm</td>
<td>hh:mm</td>
<td>XXXXXXXXXXXX</td>
<td>Yes</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tbody>
</table>
</div>
</div>What adjustments need to be made to align the columns of the first row with the bottom column? Apologies for any language barriers.