Css для grid таблица

How to create responsive tables with pure CSS using Grid Layout Module

The most popular way to display a collection of similar data is to use tables, but HTML tables have the drawback of being difficult to make responsive.

In this article, I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

For the impatient, look at the following pen for a prototypical implementation.

An item, in this case, is a purchase order detail, that has attributes such as part number, part description, etc.

Tables Redefined (= Collection of Items)

Let’s start by redefining how table data should be expressed in HTML.

As stated earlier, since table data is essentially an ordered collection of items, it seems natural to use ordered lists. Also, since tables are often used to supplement textual descriptions, it seems natural to enclose this in a section, but this would depend on the context of how the table data is being used.

Vanilla ‘s are used to express item attributes since HTML5 does not define an appropriate tag for this. The key here is to express semantically similar attributes as a hierarchy of ‘s. This structure will be used when defining how the data should be laid out. I will come back to this in the next section on the topic of styling.

As for the actual data inside the element, the first item in the list is the header, and the rest of the items are the actual data.

Now, it’s time to start talking about styling the items with CSS Grid.

Styling Item Collections

The basic idea here is to display all attributes of the item as a normal table, display width permitting. This layout has the luxury of being able to see as many items (rows) as possible.

When the width of the display becomes narrower, some attributes are stacked vertically, in order to save horizontal space. The choice of stacking attributes should be based on:

1. Do the attributes make sense when stacked vertically? and,
2. When stacked vertically, does it save horizontal space?

When the width further shrinks to the size of a mobile device, each item is displayed as a card. This layout has redundancy because the attribute names are repeatedly displayed on each card, and has the least glanceability, but does not compromise usability (e.g. horizontal scrolling, super small text, etc).

Now let’s dive into the details.

Styling Step 1: Full Table

Here’s a visual summary of how things will be implemented with CSS Grid.

In order to make columns wrap, multiple grid containers are defined as a hierarchy. The red box is a grid container for each row, and the blue box is a container for each column group that wraps.

The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

Next, we define another grid container called .attribute-container and apply it on all intermediate ’s under the list (the blue box).

The minimum column width for all grid items under .attribute-container is specified with a CSS variable called —column-width-min (more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeat ed, available horizontal space will be split into the maximum number of columns that could take at least —column-width-min , and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fit ed.

Styling Step 2: Wrapping Table

Next, —column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container , and a different —column-width-min is specified for each class scope.

Let’s take a look at the HTML where .part-id is applied,

 
Part Number
 
Part Description
 

This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

When we combine CSS properties like this, we need only one grid container .attribute-container , with the details changing where the class is applied.

We can further nest .attribute-container s, to have multiple levels of wrapping with different widths, as in the following exert.

 
 
Part Number
 
Part Description
 
 
Vendor Number
 
Vendor Name
 
 
 .part-information < --column-width-min: 10em; >.part-id < --column-width-min: 10em; >.vendor-information

All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

@media screen and (min-width: 737px)

Styling Step Three: Card Layout

The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

The attribute names are taken from a custom attribute of the leaf called data-name , for example , and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

The first item in the list is the header and does not need to be displayed.

/* Don't display the first item, since it is used to display the header for tabular layouts*/ .collection-container>li:first-child

And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

/* 2 Column Card Layout */ @media screen and (max-width: 736px) < .collection-container < display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; >. > /* 1 Column Card Layout */ @media screen and (max-width:580px) < .collection-container < display: grid; grid-template-columns: 1fr; >>

Finishing Notes

Accessibility is an area that wasn’t considered at all and may have some space for improvement.

If you have any ideas or second thoughts, please feel free to comment!

And of course, thanks for reading.

Источник

Simple tables with CSS grid layout

In this post, I want to show how simple the CSS grid makes it to create a basic table layout with control over the column sizes.

In this simple example, I want my table to have two fairly small columns, with a third column being given the bulk of the remaining space.

You can see the result here:

See the Pen Grid Table by Mark Heath (@markheath) on CodePen.

The great thing about this is that thanks to CSS grid (which is available in a healthy majority of browsers now), you can achieve this whole thing with just one simple CSS rule:

We need to set display to grid (and I’ve also specified a max-width for my table). Then grid-template-columns is where the intelligent sizing comes in. I’m setting the third column to take 80 percent of the space, and then using fractional units to say that the other two columns should be the same size as each other.

As you can see from the embedded example, this means that if one of the short columns has unexpectedly long content, it doesn’t cause the layout of the whole table to be reconfigured. You can also set column widths to auto and it’s also worth experimenting with this to see the different results you can achieve.

And that’s all there is to it. I added a couple of additional styling properties using the handy nth-child rule to give a different background colour to each column.

Of course, I should mention that CSS is certainly not my speciality, so feel free to let me know in the comments what the correct/better way to do table layouts in CSS is!

Comments

Joe Attardi

About Mark Heath

I’m a Microsoft MVP and software developer based in Southampton, England, currently working as a Software Architect for NICE Systems. I create courses for Pluralsight and am the author of several open source libraries. I currently specialize in architecting Azure based systems and audio programming. You can find me on:

Search this site

Keep Updated

My Pluralsight Courses

• Microservices Fundamentals
• LINQ Best Practices
• Microsoft Azure Developer: Deploying and Managing Containers
• Azure Functions Fundamentals
• Azure Durable Functions Fundamentals
• Microservices Architecture: Executive Briefing
• Building Microservices
• Dapr 1 Fundamentals
• Create Serverless Functions
• More Effective LINQ
• Versioning and Evolving Microservices in ASP.NET Core
• Microsoft Azure Developer: Implement Azure Functions (AZ-204)
• Azure Container Instances: Getting Started
• Building Serverless Applications in Azure
• Azure CLI: Getting Started
• Understanding and Eliminating Technical Debt
• Windows Forms Best Practices
• Digital Audio Fundamentals
• UWP Audio Fundamentals
• Audio Programming with NAudio
• Understanding Distributed Version Control Systems
• Creating Modern WPF Applications with MahApps.Metro
• Creating and Selling a Digital Product
• ClickOnce Deployment Fundamentals

My Open Source Software

• NAudio
• NLayer
• NAudio.Sharp Media Foundation
• WaveForm Renderer
• WPF WaveForm
• TypeScript Tetris
• Skype Voice Changer
• MIDI File Mapper
• MIDI File Splitter
• SilverNibbles
• Asterisk
• WPF Shapes
• .NET Voice Recorder

Archives

Tags

• Azure (150)
• NAudio (100)
• Advent of Code (81)
• LINQ (79)
• F# (70)
• Azure Functions (67)
• C# (63)
• Azure CLI (45)
• WPF (39)
• audio (38)
• XAML (38)
• JavaScript (36)
• Silverlight (34)
• Pluralsight (27)
• Docker (26)
• MoreLINQ (26)
• Durable Functions (25)
• Azure Blob Storage (20)
• Azure Service Bus (17)
• Azure Container Instances (15)

Источник