Fixed Header Table Layout with Dynamic Column Width Adaptation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for creating a stationary header in web tables are inefficient, as they struggle with dynamic data, cross-browser compatibility, and alignment issues, often requiring complex setups or non-standard technologies that are not user-friendly or secure.
Innovation Solution
A method involving a two-table system where the top table has a hidden row with placeholder text to set column widths based on maximum data cell widths, using CSS to manage visibility and alignment, allowing for a scrollable data table with a fixed header that adapts to different browsers and user settings.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If static width values are set for table columns using HTML or CSS, then the header and data columns can be aligned, but the table cannot adapt to dynamic data or user settings
Solution Approach 1:
The patent implements a hybrid approach where the header table uses static width attributes for precise alignment, while the data table uses CSS styling with overflow properties to enable dynamic scrolling and adaptation. This allows the table to maintain column alignment precision while adapting to dynamic data through CSS-based responsive design and scrollbar integration.
2Reliability
If HTML frames or IFRAMEs are used to create a stationary header, then the header can remain fixed during scrolling, but the solution becomes complex and incompatible with many browsers
Solution Approach 1:
The patent divides the table into two separate HTML tables: a header table with fixed width attributes for stable column definitions, and a data table with CSS styling for scrolling functionality. This segmentation allows the header to remain stable while the data area provides scrolling, avoiding the complexity of frames or IFRAMEs and improving cross-browser compatibility.
3Area of stationary object
If the table width is set to fit the page, then the entire table is constrained by page size, but the header cannot remain stationary when scrolling through multiple rows
Solution Approach 1:
The patent transitions from a single-table 2D layout to a two-table vertical stacking arrangement. The header table is positioned above the data table, with the data table containing a scrollable area. This dimensional reorganization allows the header to remain stationary in the vertical dimension while the data area scrolls independently, solving the contradiction between table width constraints and header stationarity.
Data Source
AI summary
A method and computer-executable program for displaying data in a table having columns, rows and a plurality of cells defined by the columns and rows. The method involves the steps of creating a first and a second sub-tables positioned one above another or side-by-side. The top sub-table defines a non-scrollable, fixed header, while the bottom table defines a scrollable data table. The top table has a visible part and a hidden part, which contains records copied, without re-positioning or re-ordering, from a maximum width cell in the top or bottom table corresponding to each individual column. To form a fixed sidebar, the code computer-executable program code adjusts the height of the rows based on the parameters of a maximum height cell in the row. The method and program provide for a two-step process of glyph determinations: Step 1 uses the glyph determinations to adjust the HTML, by copying data. Step 2 is a multi-task process which (a) takes the HTML data as is, with no more changes from user (b) makes glyph determinations for display, and then (c) actually displays the pixels. to render the fonts on a computer-controlled screen.