Introduction

A table is defined using the <table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.

Stylizer offer you a responsive flat table.

Countries	Area	Population	Capital	Densite
Algeria	2 381 741km²	41 000 000	Algiers	16.6
Morocco	446 550km²	35 000 000	Rabat	74.6
Tunisia	163 610km²	11 037 225	Tunis	67,4

Code :

<table class="table table-responsive">
  <thead>
    <tr>
     <th>Countries</th>
     <th>Area</th>
     <th>Population</th>
     <th>Capital</th>
     <th>Densite</th>      
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Algeria</td>
    <td>2 381 741km²</td>
    <td>41 000 000</td>
    <td>Algiers</td>
    <td>16.6</td>
  </tr>  
  </tbody>
</table>   
      

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the table component.
// ---------------------------------------------------------------

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: arial;
  
}

.table {
  border-bottom: #d0d5d8 solid 1px;
  width: 100%;
  margin-bottom: 20px;
  th {
    border-right: #d0d5d8 solid 1px;
    padding: 20px 30px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
  }
  td {
    border-right: #d0d5d8 solid 1px;
    padding: 20px 30px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    &:last-child {
      border-right: 0;
    }
  }
  tbody td {
    font-size: 16px;
    text-align: center;
  }
  thead th {
    font-weight: normal;
    background-color: #ecf0f1;
    color: #333333;
    font-size: 19px;
    text-align: center;
  }
  tbody > tr:nth-child(odd) > {
    td, th {
      background-color: #f8f8f8;
    }
  }
}

/* Making the table responsive */

/* for resolution up to 767px */
@media (max-width: 767px) {
  /* Tabela responsiva */
  .table-responsive {
    display: block;
    position: relative;
    width: 100%;
    thead, tbody, th, td, tr {
      display: block;
    }
    td, th {
      height: 35px;
    }
  }
  /*  Table working as a block  */
  /* Set a size for the cells */
  .table {
    thead th {
      font-size: 16px;
    }
    th, td {
      font-size: 12px;
      padding: 8px;
    }
  }
  /* thead is "floated" left to aid in responsiveness */
  .table-responsive {
    thead {
      float: left;
    }
    tbody {
      width: auto;
      position: relative;
      overflow-x: auto;
      /* scroll horizontal */
      -webkit-overflow-scrolling: touch;
      /* Operation for touch devices */
      white-space: nowrap;
      tr {
        display: inline-block;
      }
    }
  }
  /*  Positioning side-by-side lines  */
  .table td:last-child {
    border-right: #d0d5d8 solid 1px;
  }
}