1：效果图

Html实现页面的跨行合并和跨列合并_List

2：代码H5

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SAP Test</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid black; padding: 8px; text-align: center; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="2" colspan="2">销售组织</th>
            <th rowspan="3">产品线</th>
            <th rowspan="2" colspan="1">总计</th>
            <th colspan="3">销售渠道</th>
        </tr>
        <tr>
            <th>A目录</th>
            <th>B目录</th>
            <th>C目录</th>
        </tr>
        <tr>
            <th  colspan="2">总计</th> 
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>  
        </tr>
    </table>
</body>
</html>

3：java代码-动态实现

package test.sap;

import java.util.List;

public class H5Test2 {
    public static void main(String[] args) {
        // 从接口获取数据
        List<SapBaseDto> d4 = null;

        // 生成HTML
        String html = getHtml(d4);
        System.out.println(html);
    }
    public static String getHtml(List<SapBaseDto> d4) {
        StringBuilder html = new StringBuilder();

        html.append("<!DOCTYPE html>\n");
        html.append("<html lang=\"zh-CN\">\n");
        html.append("<head>\n");
        html.append("    <meta charset=\"UTF-8\">\n");
        html.append("    <title>SAP Test</title>\n");
        html.append("    <style>\n");
        html.append("        table { border-collapse: collapse; width: 100%; }\n");
        html.append("        th, td { border: 1px solid black; padding: 8px; text-align: center; }\n");
        html.append("    </style>\n");
        html.append("</head>\n");
        html.append("<body>\n");
        html.append("    <table>\n");

        // 表头第一行
        html.append("        <tr>\n");
        html.append("            <th rowspan=\"2\" colspan=\"2\">销售组织</th>\n");
        html.append("            <th rowspan=\"3\">产品线</th>\n");
        html.append("            <th rowspan=\"2\" colspan=\"2\">总计</th>\n");
        html.append("            <th colspan=\"3\">销售渠道</th>\n"); // 修改这里，销售渠道跨三列
        html.append("        </tr>\n");

        // 表头第二行
        html.append("        <tr>\n");
        html.append("            <th>A目录</th>\n");
        html.append("            <th>B目录</th>\n");
        html.append("            <th>C目录</th>\n");
        html.append("        </tr>\n");

        // 表头第三行
        html.append("        <tr>\n");
        html.append("            <th colspan=\"2\">总计</th>\n"); 
        html.append("            <th>1</th>\n");
        html.append("            <th>2</th>\n");
        html.append("            <th>3</th>\n");
        html.append("            <th>4</th>\n"); 
        html.append("        </tr>\n");

        // 假设d4中包含数据，这里简单地遍历并添加数据行
//        for (SapBaseDto item : d4) {
            html.append("        <tr>\n");
            html.append("            <td>").append(item.getSalesOrganization()).append("</td>\n");
            html.append("            <td>").append(item.getProductLine()).append("</td>\n");
            html.append("            <td>").append(item.getTotal()).append("</td>\n");
            html.append("            <td>").append(item.getChannel()).append("</td>\n");
            html.append("            <td>").append(item.getDirectoryA()).append("</td>\n");
            html.append("            <td>").append(item.getDirectoryB()).append("</td>\n");
            html.append("            <td>").append(item.getDirectoryC()).append("</td>\n");
            html.append("        </tr>\n");
//        }

        html.append("    </table>\n");
        html.append("</body>\n");
        html.append("</html>");

        return html.toString();
    }
}