An example of a response data table in CSS3

When designing a responsive page, the hardest part is the processing of table tables, which are essential elements in data table design, and play an important role in data application projects, but it's a bit of a hassle to make the tables fit into a variety of screens. This article will use an example to show you how to use the CSS3 to implement the response data table.

When the screen is small enough (such as a mobile screen) to be less than the minimum width of the table, if you do not respond to it, a horizontal scroll bar will appear, and you need to manually move the magnification to see the part that is out of the screen, which is a bad experience. Our solution is to use CSS @media queries to detect screen sizes, and to rearrange table tables when the screen size is small enough.
Html
Let's say we have one of the following data tables, of course it may have more columns, and the code uses only 3 columns.

<table>
<thead>
<tr>
<th> name </th>
<th> Sex </th>
<th> Date of birth </th>
</tr>
</thead>
<tbody>
<tr>
<td> Shang </td>
<td> male </td>
<td>1998.2.5</td>
</tr>
<tr>
<td> Xu Wei </td>
<td> Women </td>
<td>1998.2.1</td>
</tr>
</tbody>
</table>

CSS3

First of all, we use some simple CSS code to render a basic table table, CSS code does not have a special place.

Table {
width:100%;
Border-collapse:collapse;
}
Tr:nth-of-type (Odd) {
Background: #eee;
}
th {
Background: #333;
Color:white;
Font-weight:bold;
}
TD, Th {
padding:6px;
border:1px solid #ccc;
Text-align:left;
}

This time, we use the Computer browser to open the page, the discovery shows a simple table, with the browser window shrinking, the table width will be smaller, but when the browser window is small enough, the table width because the contents of the table cell can not be smaller, so that the vertical scroll bar situation, The following CSS3 code provides the solution.
What we're going to do is to use CSS3 's @media to detect the screen size, set the table element to block blocks, and hide the header, and the TD-set border looks the same as a row. Finally we use the CSS3: before {content: "Name";} Generate a corresponding label definition for each row so that you know what each row of data means.

@media
Only screen and (max-width:760px),
(min-device-width:768px) and (max-device-width:1024px) {

/* Force table to is like tables anymore * *
Table, THEAD, tbody, TH, TD, TR {
Display:block;
}
thead TR {
Position:absolute;
Top: -9999px;
Left: -9999px;
}

TR {border:1px solid #ccc;}

TD {
/* behave like a "row" * *
Border:none;
border-bottom:1px solid #eee;
position:relative;
padding-left:50%;
}

Td:before {
/* Now like a table header * *
Position:absolute;
/* Top/left values mimic padding * *
top:6px;
left:6px;
width:45%;
padding-right:10px;
White-space:nowrap;
}

/*
Label the data
*/
Td:nth-of-type (1): Before {content: "Name";}
Td:nth-of-type (2): Before {content: "Gender";}
Td:nth-of-type (3): Before {content: "Date of birth";}
}
Now that you're using your phone to open the page, you'll notice that the layout of the table changes, and it's like this: