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 kommentar(er)
