Merging data – numbers and text (Advanced)

We introduce an alternative based on CSS3 for dealing with tables containing text and numbers.

Getting ready

Tables are used for different purposes, we will see an example where our data is not a data table. (Code Example: Chapter07_Codes_1)

Browser screenshot at 1024px

Although our table did not have many columns, showing it on a small screen is not easy. Hence we will progressively show the change in the table by subtracting the width of the screen.

How to do it...

Note that we have removed the .table class so this time apply the style directly in the table tags, see the following steps:

1. Let's use a simple table structure as we saw before.

2. Add some CSS3 to make some magic with our selectors.

3. Set our breakpoints to two sizes.

   <table>
         <thead>
           <tr>   
           <th>CONTACT</th>
           <th scope="col">Manager</th>
           <th scope="col">Label</th>
           <th scope="col">Phone</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <th scope="row">Black Sabbath</th>
             <td>Richard Both</td>
             <td>Atlantic</td>
             <td>[phone] </td>    
           </tr>
           <tr>
             <th scope="row">Ac/DC</th>
             <td>Paolla Matazo</td>
             <td>Sony</td>
             <td>[phone]</td>   
           </tr>
           <tr>
             <th scope="row">Queen</th>
             <td>Suzane Yeld</td>
             <td>Warner</td>
             <td>[phone]</td>   
           </tr>
           <tr>
             <th scope="row">Whitesnake</th>
             <td>Paul S. Senne</td>
             <td>Vertigo</td>
             <td>[phone]</td>   
           </tr>
           <tr>
             <th scope="row">Deep Purple</th>
             <td>Ian Friedman</td>
             <td>CosaNostra</td>
             <td>[phone]</td>   
           </tr>
       </tbody>
     </table>

4. Applying the style as follows:

     table {
           width: 100%;
           background-color: transparent;
           border-collapse: collapse;
           border-spacing: 0;
           background-color: #fff
       }
       th {
         text-align: left;
       }
       td:last-child, th:last-child {
         text-align:right;
       }
       td, th {
         padding: 6px 12px;
       }
       tr:nth-child(odd), tr:nth-child(odd) {
         background: #f3f3f3;
       }
       tr:nth-child(even) {
         background: #ebebeb;
       }
       thead tr:first-child, thead tr:first-child {
         background: #000;
         color:white;
       }
       table td:empty {
         background:white;
       }

5. We use CSS3 pseudo-selectors here again to help in the transformation of the table. And the most important part, the Media Queries breakpoints:

   @media (max-width: 768px) {
         tr :nth-child(3) {display: none;}
       }
       
       @media (max-width: 480px) {
         thead tr:first-child {display: none;}
         th {display: block}
         td {display: inline!important;}
       }

6. When the resolution is set to 768px, we note that the penultimate column is removed.

   

   This way we keep the most relevant information on the screen. We have hidden the information less relevant to the subject. And when we decrease further, we have the data distributed as a block.