HTML/CSS : L-Shaped Cell in Table

Question

是否可以使用 HTML 和/或 CSS 创建一个带有 L 形单元格的表格？ The only way I've found实际上并没有使单元格变成 L 形(尽管它确实让它看起来像一个)。

例如，在包含以下单元格的表格中:

| 00 | 01 | 02 | 03 |
| 10 | 11 | 12 | 13 |
| 20 | 21 | 22 | 23 |
| 30 | 31 | 32 | 33 |

目标是创建一个单元格来代替单元格 11、12 和 21，而不会将单元格 22 移开。

Answer 1

没有。你不能这样做。

但是，您可以使用一些 CSS 样式使其看起来像:

JSFiddle .

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    border: 1px solid navy;
    padding: 5px;
}

.nobordertop { border-top: none; }
.noborderbottom { border-bottom: none; }
.noborderleft { border-left: none; }
.noborderright { border-right: none; }

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
    </tr>
    <tr>
        <td>11</td>
        <td class="noborderright noborderbottom">12</td>
        <td class="noborderleft">13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>21</td>
        <td class="nobordertop">22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
    </tr>
</table>

结果: