They’re experimental at this point, but you can read more about them at EQCSS (which also offers a JS library to utilize). See the Pen Responsive Tables by Jason Gross Element QueriesĮlement queries focus on the sizing requirements of specific elements rather than on just the dimensions of a browser window. A bit of JavaScript is used to keep the table headers the same height and alignment as the other cells. Rows of data are converted into columns, making for a nicely-organized table. Here we see a table header ( thead) that is setup to float:left via CSS and remain statically positioned on small screens. See the Pen Responsive Table by Alico Static Left Table Headers with Horizontal Scrolling This solution is probably better for smaller sites that don’t contain many tables.
Simple css table example code#
While the effect is essentially the same, the requirements for maintaining code are different. Rather than using the data-th attribute, table header items are defined via the CSS content property. See the Pen Responsive Table by Geoff Yuenīelow is a slightly different take on this option. Then, using some trickery with the data-th attribute and the :before CSS selector, tables headers are essentially moved from the top row over to the left. On mobile screens, each td cell is displayed as a block, thus stacking them on top of each other. This method is a little bit more user-friendly than scrolling, albeit more difficult to set up. See the Pen Simple Responsive Table by Eric Karkovack Collapsible Cells with Repositioned Table Headers Special thanks to W3 Schools for the concept. Not necessarily the most elegant way to do things, but at least the content is accessible. Adding a container element with the overflow-x property set to auto will allow for horizontal scrolling on small screens.
Here’s a super easy way to give mobile users access to a very wide table. Start Downloading Now! Horizontal Scrolling
0 kommentar(er)
