主页 / 问题 / 1609824
Accepted
adadasd asdasdasd
Asked:2025-04-04 02:05:40 +0000 UTC2025-04-04 02:05:40 +0000 UTC

如何在 html 中制作这样的表格？

  • 772

如何制作这样的表格，我尝试了colspan和rowspan，但仍然无法得到相同的结果

表格布局模型

html

2 个回答

  1. 采取这个解决方案，如果仅通过表格。您也可以尝试通过网格

    <!DOCTYPE html>
<html lang="en" translate="no">
    <head>
        <meta charset="UTF-8">
        <title>Index Site</title>
        <style>
            div{
                width: 50%;
                margin: 50px auto;
            }
            table{
                width: 300px;
                height: 100px;
                table-layout: fixed;
            }
            table tr th{
                width: 100%;
                height: 30px;
            }
            table td, th{
                border: 2px solid black;
            }
            .d_1{
                width: 10px;
                height: 30px;
            }
            .c_1{
                width: 1px;
                height: 30px;
            }
            .t_1{
                border: 0px;
            }
        </style>
    </head>
    <body>
        <div>
            <table cellspacing="0">
                <tr>
                    <th colspan="4">Comlex Table!</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td colspan="2" rowspan="2"></td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </body>
</html>

    • 1
  2. Best Answer

    CSS 网格布局：

    .table {
    border: 1px solid;
    display: inline-grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.box1 {
    border: 1px solid;
    grid-column: 1 / 5;
    grid-row: 1;
}

.box2 {
    border: 1px solid;
    grid-column: 1;
    grid-row: 2;
}

.box3 {
    border: 1px solid;
    grid-column: 2;
    grid-row: 2;
}

.box4 {
    border: 1px solid;
    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.box5 {
    border: 1px solid;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
}

.box6 {
    border: 1px solid;
    grid-column: 3;
    grid-row: 4;
}

.box7 {
    border: 1px solid;
    grid-column: 4;
    grid-row: 4;
}
            <div class="table">
            <div class="box1"> box 1 </div>
            <div class="box2"> box 2 </div>
            <div class="box3"> box 3 </div>
            <div class="box4"> box 4 </div>
            <div class="box5"> box 5 </div>
            <div class="box6"> box 6 </div>
            <div class="box7"> box 7 </div>
        </div>

    • 0

相关问题