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>