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)
