Responsive table

Simple but efficient (HTML, CSS)

by Ovi Stof

HTML

<!-- Source: https://stackoverflow.com/questions/40256571/how-to-change-order-of-table-td-for-responsive -->
<table class="tbl_identif">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>  
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>      
  </tr>
  <tr>
    <td>Result 1</td>
    <td>Result 2</td> 
    <td>Result 3 - long text for demo</td>
    <td>Result 4</td> 
    <td>Result 5</td>
  </tr>
</table>

CSS

table.tbl_identif {
        border:2px solid navy;
        width:100%;
        border-collapse:collapse;        
      }
      table.tbl_identif th {
        border:1px solid white;
        background:navy;
        color:white;
        padding:3px;
      }
      table.tbl_identif td {border:1px solid navy; padding:3px;}
      @media only screen and (max-width: 600px) 
      {
        table.tbl_identif {margin:0 auto;width:max-content;}
        table.tbl_identif tr {          
          float:left;
          display:block;
          box-sizing:border-box;
        }
        table.tbl_identif td, table.tbl_identif th{
          display: block;
        }
        table.tbl_identif tr:first-child{
          width:max-content;
          border-right:0px solid red;
          text-align:left;
        }
        table.tbl_identif tr th{    
          border-bottom:0
        }
      }