{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-339420462", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 339420462, "node_id": "MDEyOklzc3VlQ29tbWVudDMzOTQyMDQ2Mg==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-10-25T18:10:51Z", "updated_at": "2017-10-25T18:10:51Z", "author_association": "OWNER", "body": "https://sitesforprofit.com/responsive-table-plugins-and-patterns has some useful links.\r\n\r\nI really like the pattern from https://css-tricks.com/responsive-data-tables/\r\n\r\n    /* \r\n    Max width before this PARTICULAR table gets nasty\r\n    This query will take effect for any screen smaller than 760px\r\n    and also iPads specifically.\r\n    */\r\n    @media \r\n    only screen and (max-width: 760px),\r\n    (min-device-width: 768px) and (max-device-width: 1024px)  {\r\n\r\n        /* Force table to not be like tables anymore */\r\n        table, thead, tbody, th, td, tr { \r\n            display: block; \r\n        }\r\n        \r\n        /* Hide table headers (but not display: none;, for accessibility) */\r\n        thead tr { \r\n            position: absolute;\r\n            top: -9999px;\r\n            left: -9999px;\r\n        }\r\n        \r\n        tr { border: 1px solid #ccc; }\r\n        \r\n        td { \r\n            /* Behave  like a \"row\" */\r\n            border: none;\r\n            border-bottom: 1px solid #eee; \r\n            position: relative;\r\n            padding-left: 50%; \r\n        }\r\n        \r\n        td:before { \r\n            /* Now like a table header */\r\n            position: absolute;\r\n            /* Top/left values mimic padding */\r\n            top: 6px;\r\n            left: 6px;\r\n            width: 45%; \r\n            padding-right: 10px; \r\n            white-space: nowrap;\r\n        }\r\n        \r\n        /*\r\n        Label the data\r\n        */\r\n        td:nth-of-type(1):before { content: \"First Name\"; }\r\n        td:nth-of-type(2):before { content: \"Last Name\"; }\r\n        td:nth-of-type(3):before { content: \"Job Title\"; }\r\n        td:nth-of-type(4):before { content: \"Favorite Color\"; }\r\n        td:nth-of-type(5):before { content: \"Wars of Trek?\"; }\r\n        td:nth-of-type(6):before { content: \"Porn Name\"; }\r\n        td:nth-of-type(7):before { content: \"Date of Birth\"; }\r\n        td:nth-of-type(8):before { content: \"Dream Vacation City\"; }\r\n        td:nth-of-type(9):before { content: \"GPA\"; }\r\n        td:nth-of-type(10):before { content: \"Arbitrary Data\"; }\r\n    }", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}