表头显示小

Question

我有一个带表头的小表，当我添加了一些更多的行输入表后，头已经开始不占用整个表的宽度。任何建议？感激。

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

Answer 1

使用

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