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

Target pseudo-class

This pseudo-class is called target pseudo-class and represents an element...

:target {
    outline: red dotted;
}

Error handling with ExpressJS

Error Handling refers to how Express catches and processes errors...

app.get('/', function (req, res, next) {
  fs.readFile('/file-does-not-exist', function (err, data) {
})