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号和第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 和 rowspan ，因为没有大小要坚持。因此，可以在开头设置10 <td>并为它们设置visiblity: hidden。然后你有一个空间，但它的工作原理。（Display: none无效。）并为每个<td>提供宽度和高度！

如果您在HTML中多次设置相同的类，请改用CSS：

table td {
    ...
}

然后你不必在HTML中重复它！

unit 的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;
}

Demo

表布局都搞砸了

2 个答案: