Awesome reponsive table

Recently I had one custom CRM project where I had to find ways to show large sets of information in the table: App was developed with Bootstrap, so it is normal to expect that I used default Bootstrap table, but for me it was a nightmare, very very hard to achieve what I wanted, especially at smaller resolutions. So I wrote my own table and I used it on the project. This table is great for displaying large sets of information, there is no JS code, only CSS. It’s very clear, minimalistic and I’m sure you will enjoy it. Sometimes working with the tables is very tricky, especially at smaller resolutions, this table is perfect for every screen.

Here is HTML

<div class="table-responsive">
  <table class="responsive-table  table-bordered ">
    <thead>
      <tr>
        <th scope="col">By Year</th>
        <th scope="col">TEAM</th>
        <th scope="col">GP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">2017-18</th>
        <td data-title="Team">GSW</td>
        <td data-title="GP">6.1</td>
      </tr>
      <tr>
        <th scope="row">2016-17</th>
        <td data-title="Team">GSW</td>
        <td data-title="GP">6.1</td>
      </tr>
      <tr>
        <th scope="row">2015-16</th>
        <td data-title="Team">GSW</td>
        <td data-title="GP">6.1</td>
      </tr>
    </tbody>
  </table>
</div>

Here is CSS

@media (min-width: 75em) {
  .responsive-table th,
  .responsive-table td {
    padding: 0.75em;
  }
}

@media (min-width: 62em) {
  .responsive-table {
    font-size: 1em;
  }
  .responsive-table th,
  .responsive-table td {
    padding: 0.75em 0.5em;
  }
  .responsive-table tfoot {
    font-size: 0.9em;
  }
}
@media (min-width: 52em) {
  .responsive-table {
    font-size: 0.9em;
  }
  .responsive-table thead {
    position: relative;
    clip: auto;
    height: auto;
    width: auto;
    overflow: auto;
  }
  .responsive-table tr {
    display: table-row;
  }
  .responsive-table th,
  .responsive-table td {
    display: table-cell;
    padding: 1em;
  }

  .responsive-table caption {
    font-size: 1.5em;
  }
  .responsive-table tbody {
    display: table-row-group;
  }
  .responsive-table tbody tr {
    display: table-row;
    border-width: 1px;
  }
  .responsive-table tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .responsive-table tbody th[scope="row"] {
    background-color: transparent;
    padding: 1rem 1.5rem;
    font-weight: 400;
    vertical-align: top;
    color: #707070;
    text-align: left;
  }
  .responsive-table tbody td {
    text-align: left;
  }
  .responsive-table tbody td[data-title]:before {
    content: none;
  }
}

See more on this link.

You can also read this

Simple Nodejs watcher

I built a simple Nodejs watcher that is syncing changes...

const dataCsv = './sample_data.csv';
const mongodb = require("mongodb").MongoClient;
const csvtojson = require("csvtojson");
const fs = require('fs');
let url = "mongodb://yoururl";

Simple Todo app with Node.js and Express

In this quick tutorial we will be creating a Todo...

app.listen(8080, function () {
  console.log('Running on port 8080!')
});