HTML / CSS：表中的L形单元格

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

＆＃13;

＆＃13;

* {
    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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

结果：