Transform HTML Table into Card View Using Nothing But CSS

I’d like share a recent experiment that explores how to transform a plain, old-fashioned HTML table into a dynamic card view, going beyond the traditional rows and columns.

Start With a Simple HTML Table

Let’s begin with a simple HTML table such as the following.

f5d188ed2c074f8b944552db028f98a1  
  ae20bdd317918ca68efdc799512a9b39  
    a34de1251f0d9fe1e645927f19a896e8  
      b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
      b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
    fd273fcf5bcad3dfdad3c41bd81ad3e5  
  7943277d65306330563feb42dc8c705a  
  92cee25da80fac49f6fb6eec5fd2c22a  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5    
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  a34de1251f0d9fe1e645927f19a896e8  
    b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
    b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
  fd273fcf5bcad3dfdad3c41bd81ad3e5  
  ca745a59da05f784b8811374296574e1  
f16b1740fad44fb09bfe928bcc527e08

It looks like this when rendered in browser.

Just another html table

Nothing fancy.

By definition, tables consist of rows and columns. How can we transform the traditional rows and columns layout into something more dynamic?

Discover the Power of CSS Grid

Tables don’t have to be boring. With a few simple CSS tricks, you can easily transform a traditional HTML table into a sleek list or card view.

The best part? No JavaScript, just pure CSS!

CSS grid has been an W3C Candidate Recommendation Draft since 2007, however, it has been adopted by the recent versions of all current major browsers.

CSS grid is designed for both rows and columns, making it ideal for complex layouts such as table. It allows you to manage both horizontal and vertical alignments simultaneously, which gives you much more control than Flexbox, which is primarily one-dimensional (row or column).

CSS Grid Properties to Use

1. Use CSS grid layou*t* for and .
2. Use CSS display property and set all to be block elements

   With CSS grid properties, our plain HTML table already magically transforms into a responsive list view, displaying each record neatly in a single column.

   table tbody, table thead {  
     display: grid;  
   }  
   table td {  
     display: block;  
   }
   

   

   It’s looking snazzy but a bit chaotic! Let’s sprinkle on some CSS borders to give each row in our list a little breathing room.

   table, th, tr {  
     border: 1px solid black;  
   }
   

   There you go. Check out the new look! Not too shabby for a list view created without a single line of JavaScript magic!

   

   Now we got a nice list made from an old-fashioned html table, how do we turn that nice list into a snazzy card view?

   Spoiler alert: just sprinkle on a few more lines of CSS!

   Transform List into Card View

   Our final card trick to transform table into cards is to use CSS grid property grid-template-columns:

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns is a CSS property used in the CSS Grid layout to define the structure of the grid's columns. It specifies the number of columns, their widths, and how the space within the grid is divided.

   With the repeat() function, the first parameter lets us decide how many columns we want—let’s say 4, because who doesn’t love a nice round number? The second parameter tells those columns how big to be—1fr, or one fraction of the available space. It’s like giving your columns a little pep talk: 'You all get an equal slice of the space pie!'

   Our final card view

   

   Take a moment to explore the code and see the results for yourself over on CodePen. It’s the perfect place to experiment and play around with CSS grid transformations. You may even discover some fun surprises along the way.

   Keep in mind that CSS Grid is also responsive, providing developers with enhanced control over how layouts adjust and reflow across various screen sizes and devices.

   Optional: Adding data-label to card view

   While the card view is visually appealing, it lacks the clarity of column information, leaving users to guess the data represented in each card.

   By incorporating a touch of JavaScript, we can seamlessly add data labels for each column, enhancing the association between the labels and their corresponding cells.

   f5d188ed2c074f8b944552db028f98a1  
     ae20bdd317918ca68efdc799512a9b39  
       a34de1251f0d9fe1e645927f19a896e8  
         b4d429308760b6c2d20d6300079ed38eCompany01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eContact01c3ce868d2b3d9bce8da5c1b7e41e5b  
         b4d429308760b6c2d20d6300079ed38eCountry01c3ce868d2b3d9bce8da5c1b7e41e5b  
       fd273fcf5bcad3dfdad3c41bd81ad3e5  
     7943277d65306330563feb42dc8c705a  
     92cee25da80fac49f6fb6eec5fd2c22a  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds Futterkisteb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro Moctezumab90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5    
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro  b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco Changb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cAlfreds b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMaria Andersb90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cGermanyb90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     a34de1251f0d9fe1e645927f19a896e8  
       b6c5a531a458a2e790c1fd6421739d1cCentro comercial b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cFrancisco b90dd5946f0946207856a8a37f441edf  
       b6c5a531a458a2e790c1fd6421739d1cMexicob90dd5946f0946207856a8a37f441edf  
     fd273fcf5bcad3dfdad3c41bd81ad3e5  
     ca745a59da05f784b8811374296574e1  
   f16b1740fad44fb09bfe928bcc527e08
   

   It now looks like this

   

   Demo

   It’s nothing like the html table that we started with. With CSS Grid, the layout options are endless because it allows for full control over both rows and columns in a two-dimensional space.

   Conclusion

   This tutorial only scratches the surface of the iceberg. You can easily create more responsive layouts, overlap elements, span items across multiple rows or columns, and adjust grid areas dynamically, making it highly versatile for various layout needs.

   Happy gridding!

   About the Author

   The author is a veteran web developer who created the popular PHP datagrid tool (phpgrid.com), harnessing the power of CRUD to make the world a better place — at least for developers looking to simplify their lives!

The above is the detailed content of Transform HTML Table into Card View Using Nothing But CSS. For more information, please follow other related articles on the PHP Chinese website!