See the Pen Table #3: Style the scroll (basic) by Chen Hui Jing on CodePen. Still, in this instance, “basic” refers to the fact that the table does not transform in any way. Imagine me using air-quotes around basic, because the styling for the scrolling shadows is anything but. Let’s look at the “basic” overflow first. When styling tables, allow users to scroll to see more data. One could argue that this isn’t exactly a responsive solution, but technically, the container is responding to the width of the viewport. Option 2: Style The Scrollĭavid Bushell wrote up his technique for responsive tables back in 2012, which involved invoking overflow and allowing users to scroll to see more data.
If they are numeric, or short phrases, you can probably get away with not doing much.
This sort of a pattern works best if your data itself isn’t lines and lines of text. See the Pen Table #1: Few columns, many rows by ( Chen Hui Jing) on CodePen. The issue you’d have is probably having too much room on wider screens, so it might be advisable to “cap” the maximum width of the table with a max-width while letting it shrink as necessary on a narrow screen. A table with a few columns and many rows displayed on narrow and wide screens ( Large preview) If your data fits in a table with only a few columns and lots of rows, then such a table is pretty much mobile-ready to begin with. We’re going to start off with a low-effort scenario. But for small data sets, they are often sufficient. Unfortunately, without the help of JavaScript for some DOM manipulation on the accessibility front, we only have a handful of CSS-only options. You can get some pretty nice results that work well on a whole gamut of screen sizes without the added weight of a large library. If your dataset isn’t that large, and features like pagination and sorting are not necessary, then consider a JavaScript-free option. Since tables don’t seem to be falling out of favor anytime soon, let’s see how tables can be created on the web in 2019. That being said, we have to continue to make considered design choices that do not compromise on accessibility. The web has evolved a lot over the past decade, and it’s more convenient than ever to make your site or application adapt to the viewport it is viewed in. A decade ago, an article with the “ Top 10 CSS Table Designs” was published on Smashing Magazine, and it still continues to get a lot of traffic to this day. Depending on the desired visual design, some effort was required on the CSS front to prettify those tables. However, the default styles on HTML tables are not exactly the most aesthetically pleasing thing you’ve ever seen. HTML tables present tabular data in a semantic and structurally appropriate manner. It was inevitable that the web would support the display of data in a tabular format. Tables have been used for this purpose as early as the 2 nd century and when the world started to go digital, tables came along with us. Tables are a design pattern for displaying large amounts of data in rows and columns, making them efficient for doing comparative analysis on categorical objects. Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019.
0 kommentar(er)
