I am facing an issue with my table where the header is not taking up the entire width after adding more rows with inputs. Any suggestions on how to fix this? Your help would be greatly appreciated.
HTML
<table id = "table">
<th id = "header">HEADER</th>
<tr id = "row">
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
</tr>
<tr id = "row">
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
</tr>
<tr id = "row">
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
<td><input type = "text" id = "det_0_0"></td>
</tr>
</table>
css
#table{
width:30%;
height:200px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
border:2px inset rgb(0,0,0);
border-collapse:collapse;
}
#header{
height:25px;
max-height:25px;
text-align:center;
font-size:16px;
width:100%;
font-family:Georgia, serif;
background-color:rgb(30,114,41);
color:rgb(245,245,250);
border-bottom:2px inset rgb(0,0,0);
}
#row{
font-size:14px;
font-family:Georgia, serif;
word-wrap:break-word;
background-color:rgb(255,255,255);
}