CN105094622B - 调节表格列宽的方法及设备 - Google Patents

Abstract

本申请的目的是提供一种调节表格列宽的方法及设备。具体地，根据所述操作点的当前位置信息确定所述操作点处于触发区域；在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；根据所述表格的列宽信息显示所述表格。与现有技术相比，本申请的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好，此外还能够适应弹性布局。

Description

调节表格列宽的方法及设备

技术领域

本申请涉及计算机领域，尤其涉及一种调节表格列宽的方法及设备。

背景技术

随着计算机和互联网技术的广泛应用，网页中的内容越来越丰富。对于网页中的表格，尤其是采用HTML(Hyper Text Markup Language，超文本标记语言)的<table>标签定义的表格，目前调节其列宽的方式主要是通过JavaScript绑定相应的事件，在事件响应函数中操作其列宽，但是因为实现方式的细节不同主要存在以下几点不足：

1、适应的布局类型比较单一，只能适应网页定宽布局，无法适应弹性布局。其实现思想的重点在于获取每个列的宽度，及列分割线的位置，用透明的元素以绝对定位的方式放置在拖拽点上，拖拽时其实是拖拽透明的定位元素，然后根据透明元素的位置变化，重新计算表格列宽。这样如果是自适应的弹性布局，在浏览器窗口大小变化引起表格单元格位置变化时，透明元素的位置并没有变化，所以在表格尺寸根据弹性布局变化之后，列宽的计算就会出现问题。

2、侵入式太强，容易与其它作用于表格的插件冲突。这种实现方式是为了避免第一种情况，而把定位的元素放在表头的每个单元格中，这样虽然解决了弹性布局下的元素定位问题，但是因为改变了表格内部的DOM(Document Object Model，文档对象模型)结构，可能导致原来绑定元素的失效。

3、在拉宽某一列时，表格整体也会变宽，会导致表格的整体宽度发生变化，而不是使表格整体尺寸一直保持加载时在容器中的所占尺寸，会破坏原有的布局方式。

4、无法解决有隐藏列的问题，在拖拽的列分割线两侧存在隐藏列时，导致拖拽失效。

5、无法适应网页横向宽度很大，有横向滚动条的情况，这时会出现定位错误。

6、无法解决有表格头固定的情况下，列宽拖拽的问题。

发明内容

本申请的目的是提供一种调节表格列宽的方法及设备。

为实现上述目的，本申请提供了一种调节表格列宽的方法，该方法包括：

根据所述操作点的当前位置信息确定所述操作点处于触发区域；

在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；

根据所述表格的列宽信息显示所述表格。

进一步地，根据所述表格的列宽信息显示所述表格，包括：

在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者

根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。

进一步地，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域；

根据所述操作点的当前位置信息确定所述操作点处于触发区域，包括：

若所述第一距离与第二距离之差是否小于阈值，则确定所述操作点当前处于触发区域内，其中所述第二距离为任意两个相邻的可见单元格之间的分隔线与所述网页的窗口一侧的距离。

进一步地，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格；

根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息，包括：

根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值；

将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。

进一步地，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，包括：

根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息；

根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

进一步地，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息，包括：

获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。

进一步地，在根据所述表格的列宽信息显示所述表格之后，还包括：

将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。

进一步地，根据所述表格的列宽信息显示所述表格，包括：

若存在固定表头，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。

进一步地，在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，还包括：

获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。

进一步地，获取所述表格中同一行中每个单元格的列宽值，包括：

若所述表格或所述表格的父元素的属性为隐藏，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。

根据本申请的另一方面，还提供了一种调节表格列宽的设备，该设备包括：

第一装置，用于根据所述操作点的当前位置信息确定所述操作点处于触发区域；

第二装置，用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；

第三装置，用于根据所述表格的列宽信息显示所述表格。

进一步地，所述第三装置，用于在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。

进一步地，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域；

所述第一装置，用于若所述第一距离与第二距离之差是否小于阈值，则确定所述操作点当前处于触发区域内，其中所述第二距离为任意两个相邻的可见单元格之间的分隔线与所述网页的窗口一侧的距离。

进一步地，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格；

所述第二装置，包括：

第二一模块，用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值；

第二二模块，用于将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。

进一步地，所述第二一模块在据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值时，用于根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息，以及根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

进一步地，所述第二二模块，用于获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。

进一步地，该设备还包括：

第四装置，用于在根据所述表格的列宽信息显示所述表格之后，将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。

进一步地，所述第三装置，用于在存在固定表头时，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。

进一步地，该设备还包括：

第五装置，用于在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。

进一步地，所述第五装置在获取所述表格中同一行中每个单元格的列宽值时，用于在所述表格或所述表格的父元素的属性为隐藏时，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。

与现有技术相比，本申请的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好。

同时，当分隔线两侧存在隐藏的单元格时，通过获取相邻可见单元格作为列宽调节计算的依据，避免了隐藏状态的单元格对调节结果带来的影响，并且通过获取操作点到网页的窗口一侧的距离作为计算的依据，而不是采用与DOM边界的距离作为计算的依据，可以适应网页横向宽度较大且有横向滚动条的情况，不会出现定位错误。

此外，在进行列宽调节计算时，采用同时考虑相邻的两个可见单元格，并且在计算完成后采用百分比的形式表示列宽，所以在拉宽一列时，表格整体也不会变宽，此时不会破坏原有的布局方式，并且可以适应弹性布局。而在存在固定表头时，可以将表格的相关列宽调整与固定表头关联，使得固定表头也可以随之进行调整，从而有效解决有固定表头的情况下，列宽调节的问题。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1为本申请实施例提供的一种调节表格列宽的方法的流程图；

图2为本实施例的调节表格列宽的方法中获取表格列宽信息的具体处理流程图；

图3为本申请实施例提供的一种调节表格列宽的设备的结构示意图；

图4为本实施例的调节表格列宽的设备中第二装置的具体结构示意图；

图5为本申请实施例提供的一种优选的调节表格列宽的设备的结构示意图；

图6为本申请实施例在确定操作点是否处于触发区域内时所涉及的表格示意图；

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

图1示出了本申请实施例提供的一种调节表格列宽的方法，该方法包括以下步骤：

步骤S101，根据所述操作点的当前位置信息确定所述操作点处于触发区域；

步骤S102，在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；

步骤S103，根据所述表格的列宽信息显示所述表格。

在此，所述操作点包括但不限于用户在触摸屏上的触摸位置；或者用户所操作的鼠标、轨迹球或触控板等交互装置在显示屏上的对应光标位置。本实施例中的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好。

在此，本领域技术人员应当理解，上述方法的执行主体可以包括但不限于用户设备、网络设备或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备包括但不限于个人计算机、触控终端等实现；所述网络设备包括但不限于如网络主机、单个网络服务器、多个网络服务器集或基于云计算的计算机集合等实现。在此，云由基于云计算(CloudComputing)的大量主机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个虚拟计算机。

在实际应用中，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，通过获取操作点到网页的窗口一侧的距离作为计算的依据，而不是采用与DOM边界的距离作为计算的依据，可以适应网页横向宽度较大且有横向滚动条的情况，不会出现定位错误。如图6中，所述操作点6A为鼠标在显示屏上的对应光标位置，该位置与网页的窗口一侧之间的距离即为第一距离601，一般情况下可以将网页的窗口左侧作为基准，即第一距离为鼠标的光标位置与网页窗口左侧的距离，本实施例中使用event.clienX表示该第一距离。而所述触发区域6B包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域。在实际判断时，步骤S101根据所述操作点的当前位置信息确定所述操作点处于触发区域，可以具体包括：若所述第一距离与第二距离之差是否小于阈值，则确定所述操作点当前处于触发区域内，其中所述第二距离602为任意两个相邻的可见单元格之间的分隔线6C与所述网页的窗口一侧的距离。当确定操作点进入到触发区域后，可以改变鼠标的光标形态，用来标识已经进入到了可以进行拖拽调节的触发区域内。

由于触发区域仅为两个相邻的可见单元格之间的区域，为了避免在操作点移动到表格的边界时，即最左侧的可见单元格的左边界和最右侧的可见单元格的右边界的附近时，出现光标形状改变的情况，可以先对某一单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格进行判断。在实际应用中，可以采用的jQuery的prevAll(':visible')和nextAll(':visible')对可见单元格进行遍历，判断某一可见单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格。若某一可见单元格不是表格中最左侧的可见单元格或者最右侧的可见单元格，那么该单元格的左边界和右边界均可以作为分隔线确定以确定触发区域，从而实现拖拽调节列宽。

例如对于表格左侧的第三个可见单元格th，该单元格的左边界与网页的窗口左侧的距离可以通过jQuery的th.get(0).getBoundingClientRect().left的方式获取，采用该方式可以适用于页面横向宽度较大，存在横向滚动时的场景。由于表格左侧的第三个可见单元格的左边界即为与第二个可见单元格之间的分隔线，其右边界为与第四个可见单元格之间的分隔线。若本实施例中将该距离值定义为left，第三个可见单元格的宽度定义为th.width()，那么第二个可见单元格和第三个可见单元格之间的分隔线的位置可以由left确定，而第三个可见单元格和第四个可见单元格之间的分隔线的位置可以由th.width()+left确定。由此，通过对比第一距离event.clienX与left或者th.width()+left即可确定鼠标是否进入到触发位置。本实施例中，当|event.clientX-left|＜3px或者|th.width()+left-event.clientX|＜3px的情况下，也就是鼠标移动至第三个可见单元格th的边界附近3个像素的位置时，即进入了拖动调节列宽的触发区域。此时，可以使用th.css({'cursor':'e-resize'})来改变鼠标的光标形状，用来标识进入了触发区域。

当鼠标进入到触发区域后，在该触发区域内按下鼠标，即表示开始在所述触发区域内执行调节触发操作，此时开始根据鼠标后续的拖动进行表格列宽信息的计算。相应地，以鼠标在按下后的抬起动作来表示调节终止操作，此时停止根据鼠标后续的移动进行表格列宽信息的计算。在实际应用中，可以在获取到按下鼠标的操作后改变一个用于标识是否处于拖拽过程的全局变量onDragStatus，将onDragStatus的值置为true时，表示当前处于拖动状态，此时会根据鼠标后续的拖动进行表格列宽信息的实时计算。

进一步地，步骤S103根据所述表格的列宽信息显示所述表格，具体包括：在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。在实际应用中，根据计算的结果显示所述表格时，可以采用两种方式：1、根据实时计算的结果，采用每一时刻计算得到的列宽信息显示所述表格，即表格的列宽能够随着鼠标按下后的拖动位置实时发生变化，直至鼠标抬起。例如，可以设置每50ms根据鼠标的当前位置进行一次列宽信息的计算，在完成一次计算后随即进行表格显示的更新，直至鼠标抬起。2、在鼠标抬起时，获取当前时刻的列宽信息显示所述表格，即表格的列宽仅在鼠标抬起时变化。例如，列宽信息的计算同样可以设置为每50ms根据鼠标的当前位置进行一次，但是仅在鼠标抬起时获取列宽信息的计算结果，并进行表格显示的更新。在实际应用中，可以根据具体应用场景设置更新显示的方式，第一种方式显示效果更加动态、直观，但是对于设备的计算负载更高，而第二种方式对于设备的计算负载较低，但是显示效果低于第一种方式。

优选地，在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息，具体包括如图2所示的步骤：

步骤S201，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值。在此，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格，例如本次列宽调节涉及的触发区域为表格左侧第二个可见单元格和第三个可见单元格之间的分隔线两侧3个像素的区域，那么相关单元格即为所述第二个可见单元格和第三个可见单元格。由于表格中只要改变某列中的一个单元格宽度，就会导致该列宽度的变化，该列所有的单元格的宽度均会随之发生改变的，因此在处理时仅需要针对某一行中的单元格进行处理，能就可以自动适应至整个表格。

在列宽调节时，相关单元格的列宽值随相关单元格之间的分隔线的移动而变化，而分隔线的位置即为更新显示表格时鼠标所在的位置，因此，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，具体包括：根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息；根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

在实际应用中，可以在两个相关单元格中先确定一个基准单元格作为后续计算的依据，以便于后续的计算。例如，用可以根据event.clientX-left<th.width()/2来判定基准单元格，即确定鼠标的光标位置与第三个可见单元格的左侧边界还是右侧边界近一些，如果event.clientX-left<th.width()/2成立，则说明距离第三个可见单元格的左侧边界较近，此时可以将前一个不是隐藏状态的单元格(即表格左侧的第二个可见单元格)作为计算的基准单元格。当然，也可以直接设定触发区域左侧的可见单元格为基准单元格。

将所述基准单元格记作currTh，将该基准单元格右侧的首个可见单元格记作nextTh，例如可以采用while循环的方式对currTh右侧的可见单元格进行搜索，搜索到的第一个可见单元格即为nextTh。接上例，表格左侧第二个可见单元格即为currTh，其宽度为thisThWidth，而表格左侧第三个可见单元格即为nextTh，其宽度为nextThWidth，并且计算两个单元格的宽度之和twoTdWidth。若单独改变某一单元格的列宽，那么会造成表格整体宽度的变化，破坏整体的布局，因此通过同时改变两个相关单元格的列宽，当基准单元格currTh的列宽减少时，相应增加nextTh的列宽，来保证表格的整体宽度不变，使得列宽调整不会破坏表格的整体布局。

然后获取基准单元格currTh的位置，与前述方式类似，该位置同样可以采用基准单元格的左侧边界与网页窗口的左侧的距离来表示，记作thisThleft，鼠标的当前位置event.clientX，并由此计算基准单元格的位置与鼠标当前位置的位置差currThWidth。通过currThWidth-thisThWidth的值可以确定鼠标当前所在的位置是处于currTh还是nextTh，若currThWidth-thisThWidth＞0，则表示鼠标处于nextTh内，更新表格后currTh的列宽变大；若currThWidth-thisThWidth＜0，则表示鼠标处于currTh内，更新表格后currTh的列宽变小。此时，相关单元格中基准单元格currTh的列宽值为currThWidth的值，而nextTh的列宽值即为twoTdWidth-currThWidth的值。而其余同一行中其余单元格的列宽值在拖动前后不会发生变化，直接获取其原有的列宽值即可。

步骤S202，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。为了在数据传递过程中的准确性，可以通过带有索引值的数组的形式保存所述每个单元格的列宽信息。具体地，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息，包括：获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。在更新显示表格时，可以直接获取该数组，再根据每个单元格的索引值由数组中提取其对应的列宽值。

由于实时计算表格的列宽信息时，获取的列宽值均为具体数值，例如获得的各个单元格的列宽值分别为100像素、150像素等，并且步骤103在根据所述表格的列宽信息显示所述表格时，同样是根据具体数值进行显示。因此，当网页窗口的大小调整时，表格只能适应网页定宽布局，不能随着网页窗口的调整而随之发生变化，无法适应网页弹性布局。为解决上述问题，本申请实施例提供了一种优选的实施方式，在根据所述表格的列宽信息显示所述表格之后，还包括：将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。此时，数组中保存的列宽信息为每个单元格的列宽值占表格总宽度的百分比，当网页窗口的大小调整时，表格的列宽能够根据网页窗口的变化按比例进行缩放，从而能够适应弹性布局。

进一步地，在进行列宽调节之前，也可以将列宽信息以百分比的形式保存，以适应在列宽调整之前的网页窗口变化。具体地，在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，还包括：获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。由于进行百分比形式的转换需要占用一定的计算资源，因此转换一般在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，以及在根据所述表格的列宽信息显示所述表格之后进行，以避免和列宽调节时的实时计算过程同时占用计算资源，导致该时段的计算量过大，影响拖拽调节的效果。

本实施例中，获取所述表格中同一行中每个单元格的列宽值，具体包括：若所述表格或所述表格的父元素的属性为隐藏，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。在获取列宽值时，由于隐藏的元素是无法获取其列宽值，因此首先需要判断表格是否处于隐藏状态，如果表格是隐藏的，则判断是其本身隐藏还是其父元素隐藏。此处可以使用while循环向上层的父元素进行搜索，直至查到不是隐藏的父元素。将最上层的一个隐藏的父元素设置为显示，此时就可以获取到表格中每个单元格的列宽值。在完成百分比形式的转换后，可以将设置为显示的隐藏元素，重新设置为隐藏。

此外，在某些应用场景下，可能由于表格的行数过多导致高度较大，其表头(即表格的第一行)往往是对每一列内容的描述。因此在通过纵向的滚动条操作表格的内容进行纵向滚动时，需要让表头固定，使得用户在滚动过程中仍然能够看到对每一列内容的描述。由于表格本身没有固定表头的功能，因此在实现时会将另一个只有一行的表格作为原表格的固定表头，定位在原表格的第一行的位置，从而形成表头固定的效果。由于所述的固定表头和原表格实质为两个表格，因此在根据计算得到的新的列宽信息更新显示表格时，需要对固定表头进行深度克隆，具体地在步骤S103中，根据所述表格的列宽信息显示所述表格，包括：若存在固定表头，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。由此可以保证原表格和固定表头在直观上显示为相同的列宽，保证视觉效果上的一致性。进一步地，由于在显示原表格时可以采用两种方式：1、根据实时计算的结果，采用每一时刻计算得到的列宽信息显示所述表格。2、在鼠标抬起时，获取当前时刻的列宽信息显示所述表格。类似地，所述固定表头也可以采用类似的方式进行实时更新显示或者仅进行一次更新显示。

图3示出了本申请实施例提供的一种调节表格列宽的设备，第一装置310、第二装置320和第三装置330。具体地，所述第一装置310用于根据所述操作点的当前位置信息确定所述操作点处于触发区域；所述第二装置320用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；所述第三装置330用于根据所述表格的列宽信息显示所述表格。

在此，所述操作点包括但不限于用户在触摸屏上的触摸位置；或者用户所操作的鼠标、轨迹球或触控板等交互装置在显示屏上的对应光标位置。本实施例中的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好。

在此，本领域技术人员应当理解，所述设备可以包括但不限于用户设备、网络设备或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备包括但不限于个人计算机、触控终端等实现；所述网络设备包括但不限于如网络主机、单个网络服务器、多个网络服务器集或基于云计算的计算机集合等实现。在此，云由基于云计算(Cloud Computing)的大量主机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个虚拟计算机。

在实际应用中，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，通过获取操作点到网页的窗口一侧的距离作为计算的依据，而不是采用与DOM边界的距离作为计算的依据，可以适应网页横向宽度较大且有横向滚动条的情况，不会出现定位错误。如图6中，所述操作点6A为鼠标在显示屏上的对应光标位置，该位置与网页的窗口一侧之间的距离即为第一距离601，一般情况下可以将网页的窗口左侧作为基准，即第一距离为鼠标的光标位置与网页窗口左侧的距离，本实施例中使用event.clienX表示该第一距离。而所述触发区域6B包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域。在实际判断时，所述第一装置310，具体用于：若所述第一距离与第二距离之差是否小于阈值，则确定所述操作点当前处于触发区域内，其中所述第二距离602为任意两个相邻的可见单元格之间的分隔线6C与所述网页的窗口一侧的距离。当确定操作点进入到触发区域后，可以改变鼠标的光标形态，用来标识已经进入到了可以进行拖拽调节的触发区域内。

由于触发区域仅为两个相邻的可见单元格之间的区域，为了避免在操作点移动到表格的边界时，即最左侧的可见单元格的左边界和最右侧的可见单元格的右边界的附近时，出现光标形状改变的情况，可以先对某一单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格进行判断。在实际应用中，可以采用的jQuery的prevAll(':visible')和nextAll(':visible')对可见单元格进行遍历，判断某一可见单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格。若某一可见单元格不是表格中最左侧的可见单元格或者最右侧的可见单元格，那么该单元格的左边界和右边界均可以作为分隔线确定以确定触发区域，从而实现拖拽调节列宽。

例如对于表格左侧的第三个可见单元格th，该单元格的左边界与网页的窗口左侧的距离可以通过jQuery的th.get(0).getBoundingClientRect().left的方式获取，采用该方式可以适用于页面横向宽度较大，存在横向滚动时的场景。由于表格左侧的第三个可见单元格的左边界即为与第二个可见单元格之间的分隔线，其右边界为与第四个可见单元格之间的分隔线。若本实施例中将该距离值定义为left，第三个可见单元格的宽度定义为th.width()，那么第二个可见单元格和第三个可见单元格之间的分隔线的位置可以由left确定，而第三个可见单元格和第四个可见单元格之间的分隔线的位置可以由th.width()+left确定。由此，通过对比第一距离event.clienX与left或者th.width()+left即可确定鼠标是否进入到触发位置。本实施例中，当|event.clientX-left|＜3px或者|th.width()+left-event.clientX|＜3px的情况下，也就是鼠标移动至第三个可见单元格th的边界附近3个像素的位置时，即进入了拖动调节列宽的触发区域。此时，可以使用th.css({'cursor':'e-resize'})来改变鼠标的光标形状，用来标识进入了触发区域。

当鼠标进入到触发区域后，在该触发区域内按下鼠标，即表示开始在所述触发区域内执行调节触发操作，此时开始根据鼠标后续的拖动进行表格列宽信息的计算。相应地，以鼠标在按下后的抬起动作来表示调节终止操作，此时停止根据鼠标后续的移动进行表格列宽信息的计算。在实际应用中，可以在获取到按下鼠标的操作后改变一个用于标识是否处于拖拽过程的全局变量onDragStatus，将onDragStatus的值置为true时，表示当前处于拖动状态，此时会根据鼠标后续的拖动进行表格列宽信息的实时计算。

进一步地，所述第三装置330具体用于：在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。在实际应用中，根据计算的结果显示所述表格时，可以采用两种方式：1、根据实时计算的结果，采用每一时刻计算得到的列宽信息显示所述表格，即表格的列宽能够随着鼠标按下后的拖动位置实时发生变化，直至鼠标抬起。例如，可以设置每50ms根据鼠标的当前位置进行一次列宽信息的计算，在完成一次计算后随即进行表格显示的更新，直至鼠标抬起。2、在鼠标抬起时，获取当前时刻的列宽信息显示所述表格，即表格的列宽仅在鼠标抬起时变化。例如，列宽信息的计算同样可以设置为每50ms根据鼠标的当前位置进行一次，但是仅在鼠标抬起时获取列宽信息的计算结果，并进行表格显示的更新。在实际应用中，可以根据具体应用场景设置更新显示的方式，第一种方式显示效果更加动态、直观，但是对于设备的计算负载更高，而第二种方式对于设备的计算负载较低，但是显示效果低于第一种方式。

优选地，所述第二装置320的具体结构如图4所示，包括第二一模块321和第二二模块322。具体地，所述第二一模块321用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值。在此，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格，例如本次列宽调节涉及的触发区域为表格左侧第二个可见单元格和第三个可见单元格之间的分隔线两侧3个像素的区域，那么相关单元格即为所述第二个可见单元格和第三个可见单元格。由于表格中只要改变某列中的一个单元格宽度，就会导致该列宽度的变化，该列所有的单元格的宽度均会随之发生改变的，因此在处理时仅需要针对某一行中的单元格进行处理，能就可以自动适应至整个表格。

在列宽调节时，相关单元格的列宽值随相关单元格之间的分隔线的移动而变化，而分隔线的位置即为更新显示表格时鼠标所在的位置，因此，所述第二一模块321在据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值时，用于根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息，以及根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

在实际应用中，可以在两个相关单元格中先确定一个基准单元格作为后续计算的依据，以便于后续的计算。例如，用可以根据event.clientX-left<th.width()/2来判定基准单元格，即确定鼠标的光标位置与第三个可见单元格的左侧边界还是右侧边界近一些，如果event.clientX-left<th.width()/2成立，则说明距离第三个可见单元格的左侧边界较近，此时可以将前一个不是隐藏状态的单元格(即表格左侧的第二个可见单元格)作为计算的基准单元格。当然，也可以直接设定触发区域左侧的可见单元格为基准单元格。

将所述基准单元格记作currTh，将该基准单元格右侧的首个可见单元格记作nextTh，例如可以采用while循环的方式对currTh右侧的可见单元格进行搜索，搜索到的第一个可见单元格即为nextTh。接上例，表格左侧第二个可见单元格即为currTh，其宽度为thisThWidth，而表格左侧第三个可见单元格即为nextTh，其宽度为nextThWidth，并且计算两个单元格的宽度之和twoTdWidth。若单独改变某一单元格的列宽，那么会造成表格整体宽度的变化，破坏整体的布局，因此通过同时改变两个相关单元格的列宽，当基准单元格currTh的列宽减少时，相应增加nextTh的列宽，来保证表格的整体宽度不变，使得列宽调整不会破坏表格的整体布局。

然后获取基准单元格currTh的位置，与前述方式类似，该位置同样可以采用基准单元格的左侧边界与网页窗口的左侧的距离来表示，记作thisThleft，鼠标的当前位置event.clientX，并由此计算基准单元格的位置与鼠标当前位置的位置差currThWidth。通过currThWidth-thisThWidth的值可以确定鼠标当前所在的位置是处于currTh还是nextTh，若currThWidth-thisThWidth＞0，则表示鼠标处于nextTh内，更新表格后currTh的列宽变大；若currThWidth-thisThWidth＜0，则表示鼠标处于currTh内，更新表格后currTh的列宽变小。此时，相关单元格中基准单元格currTh的列宽值为currThWidth的值，而nextTh的列宽值即为twoTdWidth-currThWidth的值。而其余同一行中其余单元格的列宽值在拖动前后不会发生变化，直接获取其原有的列宽值即可。

所述第二二模块322用于将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。为了在数据传递过程中的准确性，可以通过带有索引值的数组的形式保存所述每个单元格的列宽信息。具体地，所述第二二模块322用于获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。在更新显示表格时，可以直接获取该数组，再根据每个单元格的索引值由数组中提取其对应的列宽值。

由于实时计算表格的列宽信息时，获取的列宽值均为具体数值，例如获得的各个单元格的列宽值分别为100像素、150像素等，并且第三装置330在根据所述表格的列宽信息显示所述表格时，同样是根据具体数值进行显示。因此，当网页窗口的大小调整时，表格只能适应网页定宽布局，不能随着网页窗口的调整而随之发生变化，无法适应网页弹性布局。为解决上述问题，本申请实施例提供了一种优选的调节表格列宽的设备，该设备的结构如图5所示，除图3所示第一装置310、第二装置320和第三装置330之外，还包括第四装置340。具体地，所述第四装置340用于在根据所述表格的列宽信息显示所述表格之后，将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。此时，数组中保存的列宽信息为每个单元格的列宽值占表格总宽度的百分比，当网页窗口的大小调整时，表格的列宽能够根据网页窗口的变化按比例进行缩放，从而能够适应弹性布局。在此，本领域技术人员应当理解，所述第一装置310、第二装置320和第三装置330分别与图3实施例中对应装置的内容相同或基本相同，为简明起见，故在此不再赘述，并以引用的方式包含于此。

进一步地，在进行列宽调节之前，也可以将列宽信息以百分比的形式保存，以适应在列宽调整之前的网页窗口变化。具体地，本申请实施例中的调节表格列宽的设备还可以包括第五装置(未示出)，该第五装置用于在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。由于进行百分比形式的转换需要占用一定的计算资源，因此转换一般在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，以及在根据所述表格的列宽信息显示所述表格之后进行，以避免和列宽调节时的实时计算过程同时占用计算资源，导致该时段的计算量过大，影响拖拽调节的效果。

其中，所述第五装置在获取所述表格中同一行中每个单元格的列宽值时，具体用于在所述表格或所述表格的父元素的属性为隐藏时，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。在获取列宽值时，由于隐藏的元素是无法获取其列宽值，因此首先需要判断表格是否处于隐藏状态，如果表格是隐藏的，则判断是其本身隐藏还是其父元素隐藏。此处可以使用while循环向上层的父元素进行搜索，直至查到不是隐藏的父元素。将最上层的一个隐藏的父元素设置为显示，此时就可以获取到表格中每个单元格的列宽值。在完成百分比形式的转换后，可以将设置为显示的隐藏元素，重新设置为隐藏。

此外，在某些应用场景下，可能由于表格的行数过多导致高度较大，其表头(即表格的第一行)往往是对每一列内容的描述。因此在通过纵向的滚动条操作表格的内容进行纵向滚动时，需要让表头固定，使得用户在滚动过程中仍然能够看到对每一列内容的描述。由于表格本身没有固定表头的功能，因此在实现时会将另一个只有一行的表格作为原表格的固定表头，定位在原表格的第一行的位置，从而形成表头固定的效果。由于所述的固定表头和原表格实质为两个表格，因此在根据计算得到的新的列宽信息更新显示表格时，需要对固定表头进行深度克隆，具体地所述第三装置330用于在存在固定表头时，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。由此可以保证原表格和固定表头在直观上显示为相同的列宽，保证视觉效果上的一致性。进一步地，由于在显示原表格时可以采用两种方式：1、根据实时计算的结果，采用每一时刻计算得到的列宽信息显示所述表格。2、在鼠标抬起时，获取当前时刻的列宽信息显示所述表格。类似地，所述固定表头也可以采用类似的方式进行实时更新显示或者仅进行一次更新显示。

综上所述，本申请的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好。

同时，当分隔线两侧存在隐藏的单元格时，通过获取相邻可见单元格作为列宽调节计算的依据，避免了隐藏状态的单元格对调节结果带来的影响，并且通过获取操作点到网页的窗口一侧的距离作为计算的依据，而不是采用与DOM边界的距离作为计算的依据，可以适应网页横向宽度较大且有横向滚动条的情况，不会出现定位错误。

此外，在进行列宽调节计算时，采用同时考虑相邻的两个可见单元格，并且在计算完成后采用百分比的形式表示列宽，所以在拉宽一列时，表格整体也不会变宽，此时不会破坏原有的布局方式，并且可以适应弹性布局。而在存在固定表头时，可以将表格的相关列宽调整与固定表头关联，使得固定表头也可以随之进行调整，从而有效解决有固定表头的情况下，列宽调节的问题。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims (18)

1.一种调节表格列宽的方法，其中，该方法包括：

若第一距离与第二距离之差小于阈值，则确定操作点当前处于触发区域内，其中，所述第二距离为任意两个相邻的可见单元格之间的分隔线与网页的窗口一侧的距离，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域；

在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和相关单元格的当前位置信息获取表格的列宽信息；

根据所述表格的列宽信息显示所述表格。

2.根据权利要求1所述的方法，其中，根据所述表格的列宽信息显示所述表格，包括：

在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者

根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。

3.根据权利要求1所述的方法，其中，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格；

根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息，包括：

根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值；

将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。

4.根据权利要求3所述的方法，其中，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，包括：

根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息；

根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

5.根据权利要求3所述的方法，其中，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息，包括：

获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。

6.根据权利要求1至5中任一项所述的方法，其中，在根据所述表格的列宽信息显示所述表格之后，还包括：

将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。

7.根据权利要求1至5中任一项所述的方法，其中，根据所述表格的列宽信息显示所述表格，包括：

若存在固定表头，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。

8.根据权利要求1至5中任一项所述的方法，其中，在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，还包括：

获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。

9.根据权利要求8所述的方法，其中，获取所述表格中同一行中每个单元格的列宽值，包括：

若所述表格或所述表格的父元素的属性为隐藏，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。

10.一种调节表格列宽的设备，其中，该设备包括：

第一装置，用于若第一距离与第二距离之差小于阈值，则操作点当前处于触发区域内，其中，所述第二距离为任意两个相邻的可见单元格之间的分隔线与网页的窗口一侧的距离，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域；

第二装置，用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和相关单元格的当前位置信息获取表格的列宽信息；

第三装置，用于根据所述表格的列宽信息显示所述表格。

11.根据权利要求10所述的设备，其中，所述第三装置，用于在获取到所述操作点在所述触发区域内执行的调节终止操作时，根据当前时刻的所述表格的列宽信息显示所述表格；或者根据每一时刻的所述表格的列宽信息显示所述表格，直至获取到所述操作点在所述触发区域内执行的调节终止操作。

12.根据权利要求10所述的设备，其中，所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域，所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格；

所述第二装置，包括：

第二一模块，用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值，并获取同一行中其余单元格的列宽值；

第二二模块，用于将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。

13.根据权利要求12所述的设备，其中，所述第二一模块在据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值时，用于根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息，以及根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。

14.根据权利要求12所述的设备，其中，所述第二二模块，用于获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。

15.根据权利要求10至14中任一项所述的设备，其中，该设备还包括：

第四装置，用于在根据所述表格的列宽信息显示所述表格之后，将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。

16.根据权利要求11至14中任一项所述的设备，其中，所述第三装置，用于在存在固定表头时，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。

17.根据权利要求11至14中任一项所述的设备，其中，该设备还包括：

第五装置，用于在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。

18.根据权利要求17所述的设备，其中，所述第五装置在获取所述表格中同一行中每个单元格的列宽值时，用于在所述表格或所述表格的父元素的属性为隐藏时，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。