HTML / CSS：表中的L形单元格 [英] HTML/CSS: L-Shaped Cell in Table

问题描述

是否可以使用HTML和/或CSS创建一个带有L形单元格的表格？ 唯一的方法我已发现实际上并没有使单元格呈L形（虽然它确实看起来像一个）。

Is it possible, using HTML and/or CSS, to create a table with an L-shaped cell? The only way I've found doesn't actually make the cell L-shaped (though it does make it look like one).

例如，在一个表中以下单元格：

For example, in a table with the following cells:

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

目标是创建一个代替单元格11,12和21的单元格，而无需将单元格22移开。

The goal is to make a cell that takes the place of cells 11, 12, and 21, without shifting cell 22 out of the way.

推荐答案

否。你不能这样做。

然而，你可以用

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>

这篇关于HTML / CSS：表中的L形单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！