Table responsive layout tips for super nice

today , I met a very interesting question , A group friend asked me , Only use CSS, Whether such a responsive layout effect can be achieved ：

Simply analyze the effect ：

1. When the screen viewport is wide , As a whole Table The style of
2. When the screen viewport width is small , primary Table Each row of data in the is split into one Table To display

An interesting responsive layout , Let the information get a good display under the small screen .

that , Only use CSS Words , Can such a layout be realized ？ The answer is Tolerable .

First , It will definitely use Media query , It's not hard to see that . in addition , Let's look at each set of data after splitting ：

There will be a group of the original whole Table Header information when , The main difficulty is here , How do we split it into sub - items one by one Table Display time , At the same time, these header information ？

Implementation of the basic structure

First , Let's first implement the... Under the conventional widescreen HTML And the corresponding CSS.

Relatively simple , There is nothing special here , Use <table> Label or use div、ul Wait for the tag 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>
    // ...  Repeat groups 
  </tbody>
</table>

Copy

Get such a simple Table：

Use media query to put a single Table Split into multiple

The next step is simple , Set the appropriate threshold （ It depends on the actual business situation ）, Use media query to put a single Table Split into multiple children Table.

@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;
  }
}

Copy

What is done here is also very simple ：

1. Use the media to search , Set the screen width to be less than 600px The style of
2. Remove from the original table <thead> Header , Just hide it
3. Put the original line <tr>, Set to display: block, And set a bottom margin , Make each of them separate
4. In the original line <td>, Set to display: block, such , They will be arranged vertically , Make every one <tr> Form a new child table

good , such , Then the screen width is less than 600px when , We got this one Table：

With the help of pseudo elements and their properties , Display header information

Next step , That is the most critical step , How do we get there table Each line , That is to say <td> Inside , Show the original header information ？

It's actually very simple here , It simply uses pseudo elements , Extremely readable HTML Small feature implementation of tag attributes .

We just need to make a simple change to the code , For each <td> Of HTML, Bring the corresponding header column description information ：

<table>
  //  The information above is consistent 
  <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>
    // ...  Every  tr  Do the same 
  </tbody>
</table>

Copy

next , With the help of td The pseudo elements of , Display the header information ：

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

Copy

here , Our core knowledge point is to use the pseudo element of the element to be able to content In the attribute , Read it HTML Attribute contents within the element , And show the knowledge points .

1. Suppose a HTML Labels are defined as ： <div data-msg="ABC">
2. Then the div If the corresponding pseudo class is set content: attr(data-msg) , You can read data-msg Value , amount to content:"ABC"

such , We are on a small screen , You get such an effect ：

The complete effect , As shown in the caption ：

complete DEMO, You can poke here ：CodePen Demo -- Simple Responsive Table in CSS

Last

This feature of pseudo elements can be applied in many places in daily effects , There are many articles mentioned before .

A very small skill , Have you learned ？ This concludes the article , I hope it helps you

More exciting CSS Technical articles summarized in mine Github -- iCSS , Continuous updating , Welcome to point a star Subscribe to the collection .

Any questions or Suggestions , Communicate more , Original article , Writing co., LTD. , Pretty good , If there is anything wrong with the text , All hope to inform .