![]() If other solutions to this come along, I’ll keep this page updated. It’s likely there are some fancy JavaScript solutions that could approach things differently and also work great. There may be some accessibility concerns (or maybe not, I’m really not sure). This is just one potential solution to the problem to data tables on small screens. In the demo, I use a couple of extra media queries for mobile to force the body to certain widths so they don’t get feisty. There are two pages to the demo, one the responsive table solution, and a link to the non-responsive version so you can jump back and forth to see the problem. This all works fine in IE 10 and IE 10 also ignores conditional comments, so the styles will work even if wrapped in !IE conditionals. If the problem was only that older versions of IE don’t support media queries, we could use the css3-mediaqueries-js project (polyfills support for all media queries) or Respond (also polyfill, way smaller, but only does min/max-width). * Or an external stylesheet or whatever */ * table-related media query stuff only */ So my solution thus far is just to wrap the media query styles in conditional comments. IE 9 and down don’t like you setting table elements as display: block It does weird stuff and doesn’t work right. (min-device-width: 768px) and (max-device-width: 1024px) Īnd so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table: Hey what about IE? This query will take effect for any screen smaller than 760pxĪnd also iPads screen and (max-width: 760px), Max width before this PARTICULAR table gets nasty No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content ( :before) to apply the label, so we know what each bit of data means. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Also, we’ll target iPads as they are right in that zone. We’ve already figured out our minimum table width is about 760px so we’ll set up our media query to take effect when the narrower than that. The small-screen responsive stuff comes in now. ![]() We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. ![]() If it is, we’re going to reformat the table. We’re going to use “responsive design” principles (CSS queries) to detect if the screen is smaller than the maximum squishitude of our table. Or you can zoom into the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Responsive design is all about adjusting designs to accommodate screens of different sizes. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower. A single row of data needs to be kept together to make any sense in a table. Data tables can be quite wide, and necessarily so. In addition to the techniques below, see this roundup of additional explorations of this problem.ĭata tables don’t do so well with responsive design.
0 Comments
Leave a Reply. |