HTML CSS

HOW TO CREATE RESPONSIVE CSS TABLES

<table class="full">  <tr> <th>A</th> <th>B</th> <th>C</th> </tr>  <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

.full { width: 100%; }

100% WIDTH TABLE

01

.twrap { width: 100%; overflow-x: auto; }

WRAP IN CONTAINER

02

<div class="twrap"><table class="full">  <tr> <th>A</th> <th>B</th> <th>C</th> </tr>  <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table></div>

.full { width: 100%; } @media screen and (max-width:768px)  { .hide { display: none; } }

<table class="full"> <tr>   <th>A</th> <th>B</th>   <th class="hide">C</th> </tr> <tr>   <td>A</td> <td>B</td>   <td class="hide">C</td> </tr> </table>

HIDE COLUMNS ON SMALL SCREEN

03

.wrap { width: 100%; } @media screen and (max-width:768px) {   .wrap, .wrap thead, .wrap tbody, .wrap tr   { display: grid; width: 100%; }   .wrap tr { grid-template-columns: auto; }  }

BREAK COLUMS INTO NEW ROW

04

<table class="wrap">  <tr> <th>A</th> <th>B</th> <th>C</th> </tr>  <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

.thegrid {   display: grid; grid-gap: 5px;   grid-template-columns: auto auto auto; } @media screen and (max-width:768px)  { .thegrid { grid-template-columns: auto; }}

USE GRID AS TABLE

05

<div class="thegrid">   <div class="head">1</div>   <div class="head">2</div>   <div class="head">3</div>   <div class="cell">1</div>   <div class="cell">2</div>   <div class="cell">3</div> </div>