Enable table horizontal scrolling when wide + full page print #33
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS to allow the scrollbar on the DataTable.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
65
to
67
| table.display { | ||
| width: 100% !important; | ||
| min-width: 100%; |
There was a problem hiding this comment.
The added CSS sets table.display { width: 100% !important; }, which overrides the inline width that DataTables applies when scrollX: true. With the fixed width in place, the table can never grow beyond its container, so no horizontal scrollbar appears and wide tables remain truncated. Dropping the !important or the fixed width lets DataTables expand the table and enables the scroll behaviour.
Useful? React with 👍 / 👎.
Contributor
Author
There was a problem hiding this comment.
fixed along with updating the table for screen resizes
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 7, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS to allow the scrollbar on the DataTable. Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27
schivmeister
changed the title
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 11, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS to allow the scrollbar on the DataTable. Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 11, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS to allow the scrollbar on the DataTable. Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 11, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with `scrollX` and accompanying CSS to allow the scrollbar on the DataTable. Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27
- remove forced table width so scrollX can size columns - allow overflow-x only on screen and expand tables for print - adjust columns on window resize to keep headers aligned
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 11, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with scrollX and accompanying CSS to allow the scrollbar on the DataTable, plus a post-init function to update the table columns after any screen resize. Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27
The JS script of the HTML report layout initialized all tables with the same DataTables instance. This means: It treated all `<table class="display">` elements as one combined table. Some tables have 3 columns, others have 7 or more columns, and some have empty cells. DataTables tries to apply sorting logic (aDataSort) across mismatched column structures, leading to the following error in the browser console: ``` jquery.dataTables.min.js:83 Uncaught TypeError: Cannot read properties of undefined (reading 'aDataSort') ``` Replace the single initialization with per-table initialization using dynamic column mapping, and update other functions accordingly. Remove also unnecessary and redundant function wrapping from the only two functions for `#toc` and `#printButton`. WARNING: This print functionality automatically expands all pages of tables in the HTML view before the print view, so you will have to refresh the page if you desire the paging reactivated.
schivmeister
changed the title
schivmeister
changed the title
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 11, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with scrollX and accompanying CSS to allow the scrollbar on the DataTable, plus a post-init function to update the table columns after any screen resize. Also, add/restore full HTML report print functionality (unsure if this ever worked). Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27 fix
schivmeister
added a commit
to meaningfy-ws/rdf-differ-ws
that referenced
this pull request
Nov 12, 2025
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with scrollX and accompanying CSS to allow the scrollbar on the DataTable, plus a post-init function to update the table columns after any screen resize. Also, add/restore full HTML report print functionality (unsure if this ever worked). Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27 fix
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with
scrollXand accompanying CSS to allow the scrollbar on the DataTable, plus a post-init function to update the table columns after any screen resize. Also, add/restore full HTML report print functionality (uncertain if this ever worked).