html - Table header displays small -

i have got little table header , after have added more rows inputs table, header has started not take whole width of table.any suggestions?would grateful.

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); } 

use

<th id = "header" colspan="3">header</th>