前端合并单元格

标签：保留 合并 前端 单元格 第二列 一行 李四

 

<!--

合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并 -只保留最上的，删除其他

左右合并-只保留最左的，删除其他

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

rospan:合并单元格的个数

说明：跨行合并，将多行单元格垂直合并

colspan:合并单元格的个数

说明：跨列合并，将多列单元格水平合并

注意点：

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead.tbody,tfoot）

 

     <table border="1" >

        <caption> <b>学生成绩单</b> </caption>

        <thead>

            <tr>

                <th>姓名</th>

                <th>成绩</th>

                <th>评语</th>

            </tr>

           </thead>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td rowspan="2" >100分</td>

                    <td>优秀</td>

                </tr>

                <tr>

                    <td>李四

                    </td>

                    <td>很好</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                   <td>总结</td>

                   <td colspan="2" >都很好</td>

                </tr>

            </tfoot>

    </table>

合并单元格，张三这一行有三列，在这一行的第二列属性中写向下合并行，合并两行内容，rowspan="2"；李四这一行有两列，因为第二列在上一行中与上一行一起合并了，上一行中已经填写了第二列的数据了，所以李四这一行只需填写两列，第二列不用填。

 

 

 

 

 

 

 

 

 

 

 

 

 

原文链接：https://blog.csdn.net/weixin_48647789/article/details/123007797

 

标签：保留,合并,前端,单元格,第二列,一行,李四
From： https://www.cnblogs.com/machangwei-8/p/16724138.html