Super Nice Table Responsive Layout Tips

Today, I encountered a very interesting question. A group friend asked me whether it is possible to achieve such a responsive layout effect using only CSS:

Simply analyze the effect:

1. When the screen viewport is wider, it is displayed as an overall Table style
2. When the screen viewport width is small, each row of data in the original Table is split into a Table for display.

A very interesting responsive layout that allows information to be displayed in a good way on small screens.

So, is it possible to achieve such a layout using only CSS? The answer is yes .

First of all, media queries will definitely be used, which is not difficult to see. In addition, we observe each group of data after splitting:

There will always be a set of header information that was originally a Table as a whole. The main difficulty is here, how do we display these header information at the same time when we split it into sub-Tables for display?

Implementation of the basic structure

First, let's implement HTML and corresponding CSS for regular widescreen.

It is relatively simple, there is nothing special here, you can use <table> tags or use div, ul and other tags to simulate a table.

 <table>
  <caption>Lorem ipsum !</caption>
  <thead>
    <tr>
      <th>Account</th>
      <th>Due Date</th>
      <th>Amount</th>
      <th">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    // ... 重复多组
  </tbody>
</table>

Get a simple Table like this:

Use media queries to split a single table into multiple

The next step is also very simple, set an appropriate threshold (depending on the actual business situation), and use media queries to split a single table into multiple sub-tables.

 @media screen and (max-width: 600px) {
  table {
    border: 0;
  }  
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
  }
}

What is done here is also very simple:

0. Use media query to set the style of screen width less than 600px
1. Remove the header of the original table <thead> and hide it directly
2. Set the original line <tr> to display: block and set a bottom margin to separate each one
3. Set the <td> in the original row to display: block , so that they will be arranged vertically, so that each <tr> forms a new subtable

Well, in this way, when the screen width is smaller than 600px , we get such a Table:

Realize the display of header information with the help of pseudo elements and their characteristics

The next step, which is the most critical step, how do we display the original header information in each row of the sub-table, which is <td> ?

It's actually very simple here, just simply using pseudo-elements, which is extremely small feature implementation that can read HTML tag attributes.

We just need to simply modify the code and give each <td> HTML with the corresponding header column description information:

 <table>
  // 上方信息保持一致
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    // ... 每个 tr 进行同样的处理
  </tbody>
</table>

Then, with the help of the pseudo element of td, the display of the header information can be realized:

 @media screen and (max-width: 600px) {
  // ... 保持一致
  table td {
    position: relative;
    display: block;
    text-align: right;
  }
  table td::before {
    position: absolute;
    left: 10px;
    right: 0;
    content: attr(data-label);
  }
}

Here, our core knowledge point is to use the pseudo element of the element to read the attribute content in its HTML element in the content attribute and display it. In this way, we get such an effect under the small screen:

The complete effect is as shown in the title image:

For the complete demo, you can click here: CodePen Demo -- Simple Responsive Table in CSS

at last

A very small skill, have you learned it? This concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdote 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.