HTML/CSS: L-Shaped Cell in Table -

HTML/CSS: L-Shaped Cell in Table -

is possible, using html and/or css, create table l-shaped cell? the way i've found doesn't create cell l-shaped (though create one).

for example, in table next cells:

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

the goal create cell takes place of cells 11, 12, , 21, without shifting cell 22 out of way.

no. cannot this.

however, can create look like few css styles:

jsfiddle.

css * { 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; } html <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> result:

html css html-table