champs-libres/responsive-table-fluxbox
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-17 09:26:09 +02:00
commit 5a9c6947bc
13 changed files with 2089 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
scss/styles.scss Normal file
View File

@@ -0,0 +1,107 @@
body {
padding: 1em;
div.test {
border: 1px solid grey;
padding: 1em;
margin: 0 2em 1em;
}
}
div#t1 {
table,
td,
th {
border: 1px solid lightgrey;
padding: 0.5em;
border-collapse: collapse;
}
}
div#t2 {
div.table {
display: flex;
flex-direction: column;
}
div.row {
display: flex;
min-height: 50px;
}
div.cell {
flex: 4;
border: 1px solid lightgrey;
}
div.cell:nth-child(1) {
flex: 1;
}
div.cell:nth-child(2) {
flex: 2;
}
div.cell.span4-5 {
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
}
div.cell.span3-4 {
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
}
div.cell.span3-5 {
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
}
div.row:first-child div.cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
font-weight: bold;
}
div.row div.cell {
padding: 5px;
box-sizing: border-box;
}
}
div#t3 {
.container {
display: flex;
flex-wrap: wrap; /* allow items to wrap */
justify-content: space-between; /* vertical */
align-items: stretch; /* horizontal, is default and can be omitted */
}
.item {
flex-basis: 25%; /* give each item a width */
border: 1px solid lightgrey;
box-sizing: border-box;
flex-shrink: 0; /* prevent from "shrink to fit" */
min-width: 0; /* allow to shrink past content width */
overflow: hidden; /* hide overflowed content */
}
.item:nth-child(n+5) {
margin-top: 10px; /* from 5th item, add top margin */
}
}
div#t4 {
/* (A1) CONTAINER - BIG SCREEN */
.thegrid {
display: grid;
grid-template-columns: auto auto auto auto;
/* OR SPECIFY WIDTH
*/
grid-template-columns: 40% 20% 20% 20%;
grid-gap: 5px;
}
/* (A2) CONTAINER - SMOL SCREEN */
@media screen and (max-width:768px) {
.thegrid { grid-template-columns: auto auto; }
}
/* (B) CELLS */
.thegrid .head, .thegrid .cell {
padding: 10px;
}
/* (C) HEADER CELLS */
.thegrid .head {
font-weight: bold;
background: #ffe4d1;
}
/* (D) DATA CELLS */
.thegrid .cell {
background: #d1f2ff;
}
}

110
scss/styles2.scss Normal file
View File

@@ -0,0 +1,110 @@
body {
padding: 1em;
div.test {
border: 1px solid grey;
padding: 1em;
margin: 0 2em 1em;
table,
tbody,
td,
th,
thead,
tr {
border: 1px solid lightgrey;
border-collapse: collapse;
}
}
}
@media only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
table,
tbody,
td,
th,
thead,
tr {
display: block;
border: 0;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem;
}
tr:nth-child(odd) {
background: #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
td:nth-of-type(1):before {
content: "First Name";
}
td:nth-of-type(2):before {
content: "Last Name";
}
td:nth-of-type(3):before {
content: "Job Title";
}
td:nth-of-type(4):before {
content: "Favorite Color";
}
td:nth-of-type(5):before {
content: "Wars of Trek?";
}
td:nth-of-type(6):before {
content: "Secret Alias";
}
td:nth-of-type(7):before {
content: "Date of Birth";
}
td:nth-of-type(8):before {
content: "Dream Vacation City";
}
td:nth-of-type(9):before {
content: "GPA";
}
td:nth-of-type(10):before {
content: "Arbitrary Data";
}
}

96
scss/styles3.scss Normal file
View File

@@ -0,0 +1,96 @@
div.table {
display: flex;
flex-direction: column;
div.tr {
display: flex;
min-height: 50px;
&:nth-child(1) {
border-top: 1px solid grey;
}
&:nth-child(odd) {
background: #dedede;
}
div.td {
display: flex;
align-items: center;
flex: 4;
border: 1px solid grey;
border-top: 0;
border-left: 0;
&:nth-child(1) {
border-left: 1px solid grey;
}
&:nth-child(1) { flex: 1; } // les largeurs de colonnes
&:nth-child(2) { flex: 4; }
&:nth-child(3) { flex: 6; }
&:nth-child(4) { flex: 2; }
&:last-child { flex: 2; }
div.thead { // TODO affiché par erreur en grand écran,
// car le script applique ici la l.57 du script js
// commenter pour voir le problème
display: none;
}
}
&.header div.td {
justify-content: center;
font-weight: bold;
}
div.td,
div.thead {
padding: 5px;
box-sizing: border-box;
}
}
}
@media only screen
and (max-width: 800px) {
div.table {
margin-right: 0.5em;
div.tr {
flex-direction: column;
padding-left: 37%;
&.header {
position: absolute;
top: -9999px;
left: -9999px;
}
div.td {
position: relative;
border-left: 1px solid grey;
div.thead { // idem l.28
display: block;
position: absolute;
top: 0;
left: -57%;
width: 52%;
padding-right: 10px;
white-space: nowrap;
}
&:nth-child(1) {
//border-left: 0;
}
}
&:nth-child(2) {
div.td:nth-child(1) {
border-top: 1px solid grey;
}
}
}
}
@media only screen
and (max-width: 450px) {
div.table {
div.tr {
padding-left: 0;
div.td {
padding-left: 1.5em;
&.thead {
font-weight: bold;
padding-left: 0.5em;
}
}
}
}
}
}