表格布局都搞砸了

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>

我正在嘗試生成如下表：

我編寫了上面的代碼來創建此表。

我不明白怎么了！ 看着桌子，一切都搞砸了。 誰能告訴我這里有什么問題，我應該怎么辦？ 請忽略顏色。

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更好地分配內容。

Answer 2

問題在於瀏覽器無法 計算 colspan和rowpan ，因為沒有大小可保持 。 因此，可以在開始時設置10 <td>並設置visiblity: hidden為它們visiblity: hidden 。 然后您有一個空間，但是它可以工作。 （ Display: none不起作用。）並給每個<td> 寬度和高度 ！

如果您多次在HTML中設置相同的類，請改用CSS：

table td {
    ...
}

那么您不必在HTML中重復它！

單位的colspan必須為2，而location的colspan必須為3。

的HTML

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

的CSS

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

.allmenus td {
    background-color: #123456;
    color: white;
    font-size: 15px;
    text-align: center;
    padding: 2px;
    width: 20px;
    height: 20px;
}

.hidden td {
    visibility: hidden;
}

演示版