Tag: table

Tables, mainly if with more than two columns, are badly rendered on small screens (smartphones, tablets and the like). Indeed, not only they are unreadable, but they mess up the whole page, making it unreadable on small screens.

Therefore the best would be avoid as possible tables used as layout or even concept map.

The only tables you should use are for data (as from a database). In these cases you can use this helpful css code:

 <style type="text/css">
 /*<![CDATA[*/
 table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
 }

 table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
 }

 table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
 }

 table th,
 table td {
  padding: .625em;
  text-align: center;
 }

 table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
 }

 @media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
 }

 /*]]>*/
 </style>

In this way you can get you data perfectly readable on small screen., as you can see in this example.