HTML表colspan的行数为奇数

Question

我的目标是使用带有colspan的简单表来创建这样的表：

我使用以下代码尝试复制它：

<table>
    <tr>
        <td colspan="3">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td colspan="2">3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td colspan="2">7</td>
        <td>8</td>
    </tr>
</table>

以下是输出。单元7的尺寸不正确。

该表应该有4列。并且每行，当以colspan表示单元格时，总计为4。如何在不引入具有4个单元格的行的情况下完成此操作？

Answer 1

使用表格：

HTML：

    <table>
        <tr>
            <td colspan="3">1</td>
            <td colspan="1">2</td>
        </tr>
        <tr>
            <td colspan="2">3</td>
            <td colspan="1">4</td>
            <td colspan="1">5</td>
        </tr>
        <tr>
            <td colspan="1">6</td>
            <td colspan="2">7</td>
            <td colspan="1">8</td>
        </tr>
        <tr style="visibility: hidden;">
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
        </tr>

    </table>

CSS：

table, th, td {
    border: 1px solid black;
 }
td { 
    padding: 40px;
    text-align: center;
}

---

使用CSS grid：

HTML：

<div class="grid-container">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="seven">7</div>
    <div class="eight">8</div>
</div>

CSS：

.grid-container{
    display: grid;
    grid-template-areas: 
        'one one one two'
        'three three four five'
        'six seven seven eight';
        width: 50%;
        grid-gap: 2px;
        padding: 2px;
        background: black;
}

.grid-container div{
    padding: 40px;
    text-align: center;
    background-color: white;
}

.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
.six { grid-area: six; }
.seven { grid-area: seven; }
.eight{ grid-area: eight; }