列沒有完全跨越三列表

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。