1

我是 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%;
}

我究竟做错了什么？

4

1 回答 1

1

display:block从#PowerPlantTable 中删除。

表是默认的display:table。

于 2012-05-15T03:05:04.507 回答