In this case, we have a Google Spreadsheet with two sheets in it: one called data for the actual table data, and another called labels for things like verbose column headers. The standard templates we use for our big projects and for our smaller daily graphics projects rely on Copytext.py, a Python library that lets us use Google Spreadsheets as a kind of lightweight CMS. It’s rather repetitive to write those same data-title attributes over and over. Sub out all the path/to/ references with the actual published paths to those files.Īdvanced: Responsive Data Tables Made Easier With Copytext.py.#jobs-table in this case is the containing div on the parent page.Set each and to display: block to make the table cells display in rows instead of columns.Each cell has a data-title attribute with the label for that particular column. Use padding-lv0 or margin-lv0 to completely remove any margin or padding from the element. We’ve been experimenting with a technique we read about from Aaron Gustafson, where the display shifts from a data table to something more row-based at smaller screen widths. For consistent spacing and to maintain a vertical rhythm, we use a level system for both margin and padding.Padding can be applied by using the classes padding-lv1 through padding-lv8, while margin uses the margin-lv1 through margin-lv8 scale. The Problemĭata tables with multiple columns are great on desktop screens, but don’t work as well at mobile sizes, where the table might be too wide to fit onscreen. Right: The same table on a small screen, too wide for the viewport. Left: A data table on a desktop-sized screen.
0 Comments
Leave a Reply. |