当前位置: 动力学知识库 > 问答 > 编程问答 >

HTML/CSS: L-Shaped Cell in Table

问题描述:

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 |

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.

网友答案:

No. You cannot do this.

However, you can make it look like it with 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:

分享给朋友:
您可能感兴趣的文章:
随机阅读: