Table CSS Responsive

@SempervivumJan 10.2021 — #>Might be modified that way that more columns are visible on a medium sized screen

I did so in the meantime. This javascript adds the data-label attributes to the table cells:

 const tbl = document.querySelector('table');
 const headCells = tbl.rows[0].cells;
 for (let i = 1; i &lt; tbl.rows.length; i++) {
 const row = tbl.rows[i];
 for (let j = 0; j &lt; row.cells.length; j++) {
 const cell = row.cells[j];
 cell.setAttribute('data-label', headCells[j].textContent);
 }
 }

And the CSS that modifies the display dependant on the screen width:

 table {
 border: 1px solid #ccc;
 border-collapse: collapse;
 margin: 0;
 padding: 0;
 width: 100%;
 }
 
 <i>    </i>    table tr {
 <i>    </i>        background: #f8f8f8;
 <i>    </i>        border: 1px solid #ddd;
 <i>    </i>        padding: .35em;
 <i>    </i>    }
 
 <i>    </i>    table th,
 <i>    </i>    table td {
 <i>    </i>        padding: .625em;
 <i>    </i>        text-align: center;
 <i>    </i>    }
 
 <i>    </i>    table th {
 <i>    </i>        font-size: .85em;
 <i>    </i>        letter-spacing: .1em;
 <i>    </i>        text-transform: uppercase;
 <i>    </i>    }
 
 <i>    </i>    @media screen and (max-width: 800px) {
 
 <i>    </i>        table {
 <i>    </i>            border: 0;
 <i>    </i>        }
 
 <i>    </i>        table thead {
 <i>    </i>            display: none;
 <i>    </i>        }
 
 <i>    </i>        table tr {
 <i>    </i>            border-bottom: 3px solid #ddd;
 <i>    </i>            display: block;
 <i>    </i>            margin-bottom: .625em;
 <i>    </i>        }
 
 <i>    </i>        table td {
 <i>    </i>            border-bottom: 1px solid #ddd;
 <i>    </i>            display: block;
 <i>    </i>            font-size: .8em;
 <i>    </i>            text-align: right;
 <i>    </i>        }
 
 <i>    </i>        table td:last-child {
 <i>    </i>            border-bottom: 0;
 <i>    </i>        }
 
 <i>    </i>        @media screen and (min-width: 701px) and (max-width: 800px) {
 <i>    </i>            tbody {
 <i>    </i>                display: grid;
 <i>    </i>                grid-template-columns: 2fr 1fr 1fr;
 <i>    </i>            }
 
 
 <i>    </i>            tbody tr:nth-child(3n-2) td:before {
 <i>    </i>                content: attr(data-label);
 <i>    </i>                float: left;
 <i>    </i>                font-weight: bold;
 <i>    </i>                text-transform: uppercase;
 <i>    </i>            }
 
 <i>    </i>        }
 
 <i>    </i>        @media screen and (min-width: 561px) and (max-width: 700px) {
 <i>    </i>            tbody {
 <i>    </i>                display: grid;
 <i>    </i>                grid-template-columns: 2fr 1fr;
 <i>    </i>            }
 
 <i>    </i>            tbody tr:nth-child(2n-1) td:before {
 <i>    </i>                content: attr(data-label);
 <i>    </i>                float: left;
 <i>    </i>                font-weight: bold;
 <i>    </i>                text-transform: uppercase;
 <i>    </i>            }
 <i>    </i>        }
 
 <i>    </i>        @media screen and (max-width: 560px) {
 <i>    </i>            tbody {
 <i>    </i>                display: grid;
 <i>    </i>                grid-template-columns: 1fr;
 <i>    </i>            }
 
 <i>    </i>            tbody td:before {
 <i>    </i>                content: attr(data-label);
 <i>    </i>                float: left;
 <i>    </i>                font-weight: bold;
 <i>    </i>                text-transform: uppercase;
 <i>    </i>            }
 <i>    </i>        }
 <i>    </i>    }

Table CSS Responsive

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Table CSS Responsive

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴