Responsive flexbox table

Learn how to create Responsive flexbox table using html, css and/or js.

<h1>Responsive table fun</h1>
<p>
  Sometimes you have tabular data that needs to work on large and small screens alike, but viewing tables on small screens can be a nightmare. If you have to scroll horizontally to get to the end of each row, it's easy to lose track of which row you were on. This example uses a media query for small screens, and some nifty flexbox properties to turn each table row into it's own 'card' on smaller screens. Give your browser a stretch and try it out.
</p>
<h2>My Sweet Table</h2>
<table class="table">
  <tr>
    <th>Thing Number</th>
    <th>Thing 2</th>
    <th>Thing 3</th>
    <th>Thing 4</th>
    <th>Thing 5</th>
    <th>Thing 6</th>
    <th>The final thing!</th>
    <th class="empty"></th>
  </tr>
  <tr>
    <td>1</td>
    <td>some data</td>
    <td>other data</td>
    <td>ye?</td>
    <td>nay?</td>
    <td>smashing!</td>
    <td>yeah!</td>
    <td class="edit-buttons"><button class="edit">Edit</button><button class="delete">Delete</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>moar data</td>
    <td>oh</td>
    <td>bleep</td>
    <td>bloop</td>
    <td>blarp</td>
    <td>yadig?</td>
    <td class="edit-buttons"><button class="edit">Edit</button><button class="delete">Delete</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>evn mor dataz</td>
    <td>yup!</td>
    <td>boop</td>
    <td>bip</td>
    <td>bop</td>
    <td>yeah!</td>
    <td class="edit-buttons"><button class="edit">Edit</button><button class="delete">Delete</button></td>
  </tr>
  <tr>
    <td>4</td>
    <td>final data</td>
    <td>yeah!</td>
    <td>brap</td>
    <td>bwamp</td>
    <td>bwarp</td>
    <td>beep</td>
    <td class="edit-buttons"><button class="edit">Edit</button><button class="delete">Delete</button></td>
  </tr>
</table>
<style>
body {
  padding: 2em;
}

table.table { width: 100%; }

.table th, .table td { 
  text-align: left; 
  padding: 0.25em;
}

.table tr { 
  border-bottom: 1px solid #DDD;
}
td.edit-buttons { text-align: right; }
button { 
  border-radius: 3px; 
  border: none; 
  margin: 0 0.25em; 
  transition: all 0.3s;
}

button:hover { 
  box-shadow: 0 0 4px rgba(3,3,3,0.8); 
  opacity: 0.9;
}

button.edit { background: #6F9; }
button.delete { background: #F69; }

@media screen and (max-width: 800px) {
  tr { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.5em 0;
    border: 1px solid rgba(3,3,3,0.2);
  }
  td, th {
    flex: 1 1 150px;
    border: 0.5px solid rgba(3,3,3,0.2);
  }
  td.edit-buttons, td.empty {
    /*flex: 1 0 90%;
    text-align: center;*/
  }
}

* { box-model: border-box; font-family: 'futura'; }
</style>

Responsive flexbox table

Random HTML Example Codes: