html表格（单元格合并）

七行四列，怎么做出这样的效果，可以不改td的大小，做吗？
我只能做出这样的效果

要是把二行一列二列向下合并就出现错误了

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

5条回答默认最新

CSDN专家-天际的海浪 2022-02-22 17:17

关注

不改td的大小，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>
    .tab {
        border-collapse:collapse;
        width: 500px;
        height: 400px; 
    }
    .tab td{
        border: 1px solid #999;
    }
    .tab tr:after{
           content: "";
        display: table-cell;
        width: 1px;
    }
</style>
</head>
<body>
<table class="tab">
    <tr>
        <td></td>
        <td></td>
        <td rowspan="3" colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td rowspan="3" colspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

查看更多回答(4条)

编辑

预览

报告相同问题？

关注问题

前端导入excel表格时如何处理合并的单元格没有数据的问题 html javascript 前端
2023-01-03 09:05

回答 2 已采纳上面回答方向对，但是没有说全。这种xlsx插件一般都是有学校的之后都是没学校的。然后之后的学校全设置成第一个有学校的。举个例子 ```javascript let schoolList = [{学
table表格合并单元格出现错位问题 css
2021-10-12 03:29

回答 2 已采纳这应该是rowspan导致的吧，可以把rowspan去掉，如果必须要rowspan的话，不应该这么写，要看你数据格式了
HTML单元格合并响应？ html5
2015-08-26 01:28

回答 1 已采纳楼主是对表格绑定js动作是么，可以试试对td标签绑定不知道这样满足楼主要求么
jQuery实现HTML表格单元格的合并功能
2020-10-22 06:38

通过上述步骤，我们就可以利用jQuery实现一个动态的HTML表格单元格合并功能。当然，上述代码片段中有一些错误和不完整的地方，例如代码未完全展示、注释中的错误等。尽管如此，我们仍可以理解其核心思路，并据此构建...
VUE+elementUI 怎么实现动态合并单元格？ html5 vue.js
2020-04-28 02:05

回答 1 已采纳通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函
Html 一个类似 excel 表合并单元格的功能,请教！ html vue.js 前端有问必答
2022-06-13 11:56

回答 4 已采纳之前写一个居于jquery的，题主参考下https://www.w3dev.cn/article/20160304/jquery-table-td-merge-plugin.aspx
各位们这个antd 可展开表格怎么合并 javascript 前端框架
2021-08-17 07:05

回答 1 已采纳 antd?vue还是react表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值
前端表格合并单元格技巧
2023-03-30 08:09

Hejjon的博客前端表格合并单元格技巧
jQuery实现类似excel一样拖动选择table单元格进行合并，如何实现？ jquery
2016-02-28 19:56

回答 4 已采纳自己找插件解决，这个问题好久了。
Vue 获取 table表格中某个 td DOM 的实际列号（A,BC.)，请教 vue.js 前端有问必答
2022-06-17 16:17

回答 5 已采纳获取某个单元格未合并原始行列下标可以用下面函数（JS），ts的话题主转下对应的dom对象类，测试正常 <table border="1"> <tr><td id
bootstrap-table的三个相关的表如何生成新的一列做标记 bootstrap javascript 前端
2022-03-11 01:09

回答 1 已采纳对数据源做处理再渲染
JQuery实现表格中相同单元格合并示例代码
2020-10-26 20:36

#### 一、JQuery与表格单元格合并的基本概念 JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、DOM操作、动画和Ajax交互等编程工作。在实现表格中相同单元格合并时，JQuery可以...
tabel row中遍历不出要的 Td, index 对不上，请教！ vue.js 前端有问必答
2022-06-19 10:47

回答 4 已采纳这个是因为你用console.log()输出整个对象console.log()输出对象或数组时是在控制台显示一个对象或数组的引用。在用console.log()输出数组或对象时，对象（数组）的属性是折
HTML表格之合并单元格
2022-02-02 05:44

秃头少年小阮的博客合并单元格(补充) 合并单元格方式： 1.跨行合并：rowspan=“合并单元格的个数” 2.跨列合并：clospan=“合并单元格的个数” 目标单元格: 1.跨行：最上侧单元格为目标单元格，写合并代码 2.跨列：最左侧单元格为目标...
HTML 表格合并单元格的使用
2025-02-18 13:18

人才程序员的博客而在某些情况下，我们需要将多个单元格合并成一个大单元格，这就是“合并单元格”的概念。假设我们有一个表格，其中有一列包含多个行的单元格，我们希望将其中的一些行合并为一个单元格。假设我们有一个表格，其中有...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月11日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月4日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 2月22日

html表格（单元格合并）

5条回答 默认 最新

问题事件

5条回答默认最新