列未完全跨越三列表

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。