html - 表格布局全乱了

Question

CSS

table {
    width: 100%;
    height: 310px;
    margin: 10px;
}

.tabledata {
    background-color: #123456;
    color: white;
    font-size: 15px;
    text-align: center;
    padding: 2px;
}

HTML

<table class="allmenus">
    <tr>
        <td class="tabledata" colspan="5" rowspan="2">general<br>information</td>
        <td class="tabledata" colspan="3" rowspan="2">unit</td>
        <td class="tabledata" colspan="2" rowspan="2">location</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="3" rowspan="2">activities</td>
        <td class="tabledata" colspan="4" rowspan="2">future events</td>
        <td class="tabledata" colspan="3" rowspan="4">contact<br>us</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">gallery</td>
        <td class="tabledata" colspan="3" rowspan="2">Donate Blood</td>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">volunteer</td>
    </tr>
</table>

我正在尝试生成如下表格:

我写了上面的代码来创建这个表。

我不明白哪里出了问题!看看 table ，全乱了。谁能告诉我这里有什么问题，我该怎么办？请忽略颜色。

Answer 1

问题是表格列将收缩到其中数据的大小。在您的列号 4 和 5 的情况下，这几乎什么都没有。表格单元格没有平均分配，这似乎是您想要做的。

那么您有哪些选择？您可以放入表格标题并为每个单元格指定最小宽度。例如 <tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>

th {
width:10%;
}

然而，可能更好的选择是根本不使用表格。您可以使用 div 和 css 更好地分隔内容。