{"id":15547347,"url":"https://github.com/phseiff/tiny-tables","last_synced_at":"2026-05-04T02:32:52.579Z","repository":{"id":107725075,"uuid":"367208105","full_name":"phseiff/tiny-tables","owner":"phseiff","description":"Stop your website's tables from overflowing on mobile with this fancy tiny trick with CSS \u0026 JavaScript","archived":false,"fork":false,"pushed_at":"2021-12-23T21:24:15.000Z","size":16389,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T11:22:50.631Z","etag":null,"topics":["css","html","html-css-javascript","javascript","js","tables"],"latest_commit_sha":null,"homepage":"https://phseiff.com/tiny-tables/demo","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phseiff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-14T00:32:56.000Z","updated_at":"2022-10-14T16:02:18.000Z","dependencies_parsed_at":"2023-04-19T19:14:44.650Z","dependency_job_id":null,"html_url":"https://github.com/phseiff/tiny-tables","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.03703703703703709,"last_synced_commit":"b7c31ae502fc41f5546c651a455a89fb61de60c8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phseiff%2Ftiny-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phseiff%2Ftiny-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phseiff%2Ftiny-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phseiff%2Ftiny-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phseiff","download_url":"https://codeload.github.com/phseiff/tiny-tables/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246122971,"owners_count":20726921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","html-css-javascript","javascript","js","tables"],"created_at":"2024-10-02T13:08:49.719Z","updated_at":"2026-05-04T02:32:52.530Z","avatar_url":"https://github.com/phseiff.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003cimg height=\"200px\" alt=\"tiny-tables\" src=\"images/repository-open-graph-image.png\"\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eStop your website's tables from overflowing on mobile with this fancy tiny trick with CSS \u0026 Javascript\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#why-should-i-care\"\u003eWhy?\u003c/a\u003e ⋅ \u003ca href=\"#how-does-this-work\"\u003eHow?\u003c/a\u003e ⋅ \u003ca href=\"#demo-pls\"\u003eDemo pls?\u003c/a\u003e ⋅ \u003ca href=\"#how-do-i-even-use-this\"\u003eHow to use this?\u003c/a\u003e\u003c/p\u003e\n\n---\n\n## Why (should I care)?\n\nI really like tables because they are a great way of visualising data on a website and making sense of the clutter that countless data points and numbers tend to make.\n\nWikipedia, for example, tends to be quite full of tables, as are GitHub READMEs.\nMost of these tables look like this:\n\n![a large table with some lines, one of whom is pretty full](images/illustration-table-large.png)\n\nWhen you view these tables on mobile, however, or on an otherwise really small screen, they tend to look like this:\n\n\u003c!-- ![the same table, but the screen is so small that it overflows horizontally](images/illustration-table-small-crammed--large-image.png) --\u003e\n\u003cimg alt=\"the same table, but the screen is so small that it overflows horizontally and requires scrolling\" src=\"images/illustration-table-small-crammed--large-image.png\" width=\"100%\"\u003e\n\nThe tables overflow horizontally!\n\nThis hinders readability, forces users to scroll horizontally, and generally makes the mobile table experience a nuisance, plus it is, in my opinion, pretty unaesthetic.\nHorizontal scrollbars should be used as a last resort and not as the standard way of doing something, especially since 60% of website visitors are mobile users nowadays.\n\nOne solution I came up with (which this repository demonstrates) is to stack the table columns once the viewport gets so small the table tries to overflow, like this:\n\n\u003c!-- ![the same table, but for every row, the cells are shown beneath each other with different indentions](images/illustration-table-small-stacked--large-image.png) --\u003e\n\u003cimg alt=\"the same table, but for every row, the cells are shown beneath each other with different indentions\" src=\"images/illustration-table-small-stacked--large-image.png\" width=\"100%\"\u003e\n\nI think this is a really neat solution, and I don't get why no website I have ever seen does this.\n\n---\n\nFor this reason, I made this repository;\nto showcase an example on how to achieve this, share some well-documented demonstration code that you can use or build on, explain said demonstration code (it's much less trivial than it looks), and host a working demonstration of it.\n\n## How (does this work)?\n\nEssentially, I wrote two solutions, one with javascript and CSS, and one in pure CSS.\u003cbr/\u003e\nThe CSS solution is somewhat limited, whilst the javascript solution deactivates the CSS solution (only if javascript is enabled, of course) and replaces it with its own way of doing things.\n\nI will look at both solutions separately in the following:\n\n* *The pure CSS solution*:\n\n  This uses some pretty simple CSS that re-styles all tables within a query that ensures it's only applied if `screen-size\u003c600px`.\u003cbr/\u003e\n  This comes with the two disadvantages that (1) some tables might be large enough to overflow even if `screen-size\u003e599px`, and (2) all column indents are hard-coded, which means that every field past the 7\u003csup\u003eth\u003c/sup\u003e field (or so) of a row is not indented at all, and that tables with more than 4 columns (or so) will overflow even with the extra style applied.\n\nBoth of these issues are fixed by the javascript-implementation.\n\n* *The javascript+CSS solution*:\n\n  This comes in two steps:\n\n  1. As soon as the entire DOM is loaded (even before css and images finished loading), a custom CSS class is created for every table (not yet assigned to it, though).\n     This CSS class describes how the table should look like on a screen on which it'd otherwise overflow, and it contains enough indention levels for all columns, and the indention widths are adjusted to the amount of columns the table has, to make sure no field is indented more than 90px.\n   \n     This solves issue (2) of the CSS-only solution.\n\n  2. Every time the viewport is resized (and one time each after the DOM and the assets of the website are loaded), a function is called (by binding to `DOMContentLoaded`, `loaded` and `resize` events) that iterates over all tables of the document and assigns each one its minify-class (in case it overflows), and un-assigns it again (if doing so is possible without causing an overflow).\u003cbr/\u003e\n     The pure CSS solution is kept as an intermediate solution through all of this until all images are loaded (triggering the `load` event), to ensure that tables with images in them don't require horizontal scrolling until all images are loaded.\n\n     This solves issue (1) of the CSS-only solution, and it does so pretty efficiently since it adds no overhead other than a function call *on resize* and two on page load (the call on `DOMContentLoaded`, in case you wondered, isn't really necessary, but it reduces the time until layout shift is finished for websites without text-only tables).\n\n**In case you'd like to see how it looks like when the table switches to its mobile form, here is a GIF:**\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"images/resize-recording.gif\" alt=\"GIF of a recording where the demo page is resized\"/\u003e\u003c/p\u003e\n\n**FAQ:**\n\n\u003cdetails id=\"many-images-info\"\u003e\u003csummary\u003eBut isn't iterating over all tables on every resize pretty cost-intensive?\u003c/summary\u003e\n\nIt isn't, since all tables are added to an array on page load, so iterating over them goes in `O(num_tables)` rather than \u003ccode\u003eO(dom_size\u003csup\u003e2\u003c/sup\u003e)\u003c/code\u003e or something.\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eWhat's the issue about tables with images? There's even one specifically in the demo!\u003c/summary\u003e\n\nThere are actually two issues, to be precise.\n\n1. Let's say you have a table which has at least one image in every row, and these images have `width: 100%` or `max-width: 100%` with no proper min width.\n   The consequence is that these images will shrink and shrink and become ridiculously small when you reduce the screen width, and the table won't overflow (and switch into the small table styling) until at least one of these images has almost vanished.\u003cbr/\u003e\n   You want your tables to change into their mobile style *before* your images become ridiculously small, though.\n   \n   This is solved by adding some quick and dirty global\n\n   ```css\n   table img[max-width=100%] {\n       max-width: none !important;\n   }\n   table img[width=100%] {\n       width: none !important;\n   }\n   ```\n   \n   onto the page during the process of calculating whether a table overflows or not, invisibly to the user.\n\n2. It sometimes takes a while until all images are loaded, and the images a table contains can be crucial for deciding whether it overflows or not.\n   For this reason, the tables are checked for overflow both on DOM load as well as after all images have loaded.\u003cbr/\u003e\n   Since it can take a while from the first image overflowing a table, and the last image being loaded, the pure-CSS-solution remains active alongside the JS solution until all images have loaded, to err on the side of applying the tiny table styling until all images have loaded.\u003c/details\u003e\n\n## Demo pls?\n\n### for looks:\n\nI have hosted an example page with the example table from this README and another table with example images [here](https://phseiff.com/tiny-tables/demo).\n\u003cbr/\u003e\nYou can visit it and resize it to see how the tables look on a large scale display vs on a tiny display (further instructions are on the demo page).\n\nThere is also an [anti-demo](https://phseiff.com/tiny-tables/anti-demo) that shows how that'd look without our tiny little trick.\n\n### for code:\n\nThe code of the demos is in this repository, and licensed under MIT, so feel free to reuse it for your own website!\nThere is essentially one file `large-table-styling.css` which describes how the tables look by default (the style for tables that aren't at risk of overflowing), and in the file `demo.html`, you can find a full and well-documented implementation of the trick explained above.\n\n### How do I even use this?\n\nIf you use the same or a similar styling for tables as the one described in `large-table-styling.css`, you might be able to just copy the relevant code from `demo.html` (pretty much everything after the demos) into your HTML files.\n\nIf your default styling of tables is largely different, you might be able to do the same, but it will probably look somewhat odd, since the tables on mobile will give off a different vibes than they'd give off on desktop.\nYou can change the minified-table-CSS to suit your needs, though!\n\nIf your tables contain many images, you might want to tweek and double-check some things;\nsee [above](#many-images-info) for further information.\u003cbr/\u003e\nPlease also note that tables need to use `display: block`, since their overflow won't be detected correctly otherwise.\n\n---\n\nI feel like this way of handling tables should be way more popular than it apparently is (please tell me if you know of any website that does somewhat similar, I'd love to see it!), and I hope you might find it useful, too - feel free to use its code, it's MIT licensed.\n\nIf you find this trick useful, please consider giving this repository a star :star: to show your appreciation! :D\n\n\u003c!--\nToDo:\n* [x] Demo mobile optimizen\n* [x] die beiden Bilder extenden\n* [x] add browser resize gif\n* [ ] make images for sharing\n* [ ] (maybe) make texts for sharing\n--\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphseiff%2Ftiny-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphseiff%2Ftiny-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphseiff%2Ftiny-tables/lists"}