Webpage Table Display with Localized Scrolling and Frozen Headers
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current webpage designs face difficulties in efficiently displaying and comparing large tables with unlimited rows or columns, leading to low browsing efficiency and excessive network resource usage due to the need for repetitive scrolling and multiple data transmissions.
Innovation Solution
The method involves dividing a table into a 2×2 array of tables, with some tables hiding portions outside the display area and incorporating vertical and horizontal scrollbars, allowing synchronized scrolling between tables to facilitate efficient data comparison without requiring additional tabulation programs or excessive network resource usage.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Area of stationary object
If divided pages are used to display table information, then the display area is improved, but the browsing efficiency deteriorates due to repeated switching between pages
Solution Approach 1:
The patent divides the large table into multiple sub-tables arranged in a grid layout, where each sub-table displays a portion of the data. This segmentation allows the display area to be effectively utilized while maintaining continuous browsing within a single page, eliminating the need to switch between multiple pages and thus preserving browsing efficiency.
2Ease of operation
If embedded tabulation programs are used to browse large tables, then the browsing result is improved, but the network resource consumption deteriorates due to multiple data transmissions
Solution Approach 1:
The patent loads the entire table data once and prepares it for display by dividing it into sub-tables. The scrolling and navigation functionality is built into the page structure itself, eliminating the need for repeated data transmissions that would occur with embedded tabulation programs. This preliminary preparation of the data structure allows efficient browsing without additional network resource consumption.
3Area of stationary object
If a window with scrollbar is used to embed the table, then the display capability is improved, but the browsing efficiency deteriorates due to repetitive scrolling
Solution Approach 1:
The patent introduces a hierarchical navigation structure with row headers and column headers that allow users to navigate the large table by selecting specific rows or columns directly, rather than scrolling through all data sequentially. This adds a dimensional navigation capability that dramatically improves browsing efficiency while maintaining full display capability through the sub-table grid layout.
4Quantity of substance
If the entire table is displayed at once, then the data completeness is improved, but the readability deteriorates when the table exceeds screen display capacity
Solution Approach 1:
The patent segments the large table into multiple sub-tables that fit within the screen display area, with each sub-table showing a specific portion of the data. The segmentation is organized with row headers and column headers that allow users to navigate and understand the complete data set while maintaining readability within the visible area.
Solution Approach 2:
The patent creates a universal navigation structure where row headers and column headers serve multiple functions: they identify specific rows and columns, provide context for the data in each sub-table, and enable direct navigation to any portion of the large table. This multi-functional header system maintains readability while representing the complete data set.
Data Source
AI summary
The present invention discloses a method for localized scrolling table display in a webpage. The method includes: dividing a table being displayed into at least a 2×2 array of an upper left table, a lower left table, an upper right table and a lower right table; setting the lower left table and the upper right table to hide portions that are beyond display area; and setting the lower right table to hide portions that are beyond the display area and to include a vertical scrollbar and a horizontal scrollbar. The upper right table and the lower right table are controlled by the horizontal scrollbar, and the lower left table and the lower right table are controlled by the vertical scrollbar. The present invention is able to display a table in a webpage with a localized scrolling display and a partial frozen display, and allows unlimited number of data columns and rows in the webpage and still maintains good readability. This satisfies the need for displaying table of a large amount of data for data comparison, and allows the user to conveniently and freely scroll any cell of the table to the display area to be displayed.