html - 列未完全跨越三列表

Question

我是 html 的新手，所以我确定这是一个基本问题。

我有一个包含三列的表格。我希望第一列占表格宽度的 40%，第二个占 30%，第三个占 30%。我把整个表放在一个 div 中。但是这些列并没有跨越整个表格:

这是我的 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。