不规则形状表格合并

在学习表格时我们会遇到一些既跨行又跨列合并的情况，此时可以用下面这种方法来实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
    </head>
    <body>
        <br>
        <br>
        <br>
        <br>
        <table width="300px" height="300px" bordercolor="blue">
            <caption></caption>
            <tr bgcolor="antiquewhite">
                <td colspan="2" rowspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="aqua">
                <td></td>
            </tr>
            <tr bgcolor="aquamarine">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

但是需要特别指出的是，如果一个单元格既跨行又跨列合并了，那么最好不要再让相邻单元格也跨行或跨列合并了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
    </head>
    <body>
        <br>
        <br>
        <br>
        <br>
        <table width="300px" height="300px" bordercolor="blue">
            <caption></caption>
            <tr bgcolor="antiquewhite">
                <td colspan="2" rowspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="aqua">
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="aquamarine">
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

此时会出现如下所示的错误效果，可以看到单元格与单元格的尺寸不再一致了。

原文地址：https://www.cnblogs.com/xutao1517588477/p/10602765.html

时间： 2024-10-15 18:06:38

不规则形状表格合并的相关文章

QTableWidget表格合并若干问题及解决方法

Qt提供 QTableWidget作为表格的类以实现表格的基本功能,表格中所装载的每一个单元格由类QTableWidgetItem提供.这是基于表格实现 Qt提供的一个基础类,若想实现定制表格和单元格的功能则需要派生重写,使用Qt经典的MV结构 QTableView+QAbstractItemMode来实现. 关于QTableWidget+QTableWidgetItem使用方法简介: 通常在使用这对组合以实现表格基本功能时,通常的做法是: ///////////////////////////

html表格合并（行，列）

<table> <tr> <td colspan="2">失败的实例:</td> </tr> {% for ip , jieguo in reason.iteritems() %} <tr> <td colspan="2">{{ ip }}</td> </tr> {% for l, r in jieguo.iteritems() %} <tr> &

NGUI不规则形状点击

PolygonCollider2D 我们的地图是这样的不规则形状,最开始简单用Box Collider处理点击,但是点击地图边缘时命中率很差.今天查到Unity有多边形Collider可以支持不规则形状,PolygonCollider2D. 给地图[变异的开端]加上PolygonCollider2D,然后根据地图形状编辑Collider多边形,编辑好之后下图这样子. 点击实现需要注意的是NGUI中检测射线碰撞用的是Physics.RayCast,不支持2D Collider,也就是无法响应to

用Python将多个excel表格合并为一个表格

生活中经常会碰到多个excel表格汇总成一个表格的情况,比如你发放了一份表格让班级所有同学填写,而你负责将大家的结果合并成一个.诸如此类的问题有很多.除了人工将所有表格的内容一个一个复制到汇总表格里,那么如何用Python自动实现这些工作呢~ 我不知道有没有其他更方便的合并方法,先用Python实现这个功能,自己用就很方便了. 比如,在文件夹下有如下7个表格(想象一下有100个或更多的表格需要合并) 作为样例,每个表格的内容均为运行程序,将7个表格合并成了test.xls 打开test.xls

element-ui表格合并

先看一下合并后的样式,表格第四行,一二列合并官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号 <el-table :data="tableData" border :span-method="arraySpanMethod&quo

关于表格合并span-method方法的补充(表格数据由后台动态返回)

之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示场景假设后台返回的数据是这样的: 在这种情况下,一般我们会选择对行进行合并,因为这时候表格的列是知道的,只要把需要合并的列提取出来,合并行就OK,下面看代码 HTML代码 <el-table :data="tableData6" :span-method="

element ui表格合并span-method

在业务中,我们有时候会遇到需要表格合并的情况,而且是需要动态的根据返回的数据内容去合并. mergeLineMethod (){//处理合并表格数据 this.mergeLineArr = [] this.mergeLineIndex = 0 let mergeLine = this.list mergeLine.forEach((res, i) => { if (i === 0) { this.mergeLineArr.push(1); this.mergeLineIndex= 0 } els

通用表格合并单元格

1.源码: /** * 合并表格的列 * @param {String} tableId要合并的表格的id * @param {int} fCol开始的列 * @param {int} eCol结束的列 * @return void */ function mergCol(tableId, fCol, eCol) { var oTable = $(tableId); if (!$chk(oTable)/*!oTable*/) { return; } var oTBody = oTable.tBo

【js-xlsx和file-saver插件】前端html的table导出数据到excel的表格合并显示boder

最近在做项目,需要从页面的表格中导出excel,一般导出excel有两种方法:一.习惯上是建模版从后台服务程序中导出:二.根据页面table中导出:综合考虑其中利弊选择二.根据页面table中导出excel,前段有用table的也有用vue的,结佣file-saver和xlsx插件进行导出excel. 没有做封装,直接改的源码 /* generate workbook object from table */ var defaultCellStyle = { font: { name: 'Tim