列没有完全跨越三列表

Question

我是全新的HTML，所以我相信这是一个基本问题。

我有一个三列的表。我想要第一列跨越表格的40％，第二个30％和第三个30％。我有整个表格。但是，列不跨越整个表：

这里是我的html：

<div class="TableWrap"> 
    <table id="PowerPlantTable" border="1"> 

     <thead> 
      <tr bgcolor="silver"> 
       <th class="firstColumn">Power Plant</th> 
       <th class="secondColumn">MW Output</th> 
       <th class="thirdColumn">MW Capacity</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td>BRUCEA-G2</td> 
       <td>0</td> 
       <td>0</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

，这里是我的CSS：

.TableWrap{ 
    margin: 15px; 
    text-align: center; 
} 

#PowerPlantTable{ 
    display:block; 
    margin-left: auto; 
    margin-right: auto; 
    font-size:12.0px; 
} 

.firstColumn{ 
    width:40%; 
} 

.secondColumn{ 
    width:30%; 
} 

.thirdColumn{ 
    width:30%; 
} 

我在做什么错？

Answer 1

从#PowerPlantTable中删除display:block。

表格默认为display:table。