Responsive Tables Source

Link to article: Responsive Tables Source.

.responsive_table .table_data,
.responsive_table .table_header_data {
    vertical-align: top;
    text-align: left;
    margin: -0.0625rem 0 0 -0.0625rem;
}

@media screen and (min-width: 801px) {
    /* wide screens */

    .responsive_table {
        	background-color: rgb(252, 252, 252);
    	background-color: rgb(var(--swatch-background, 252, 252, 252));
    	border-collapse: collapse;
    	border-spacing: 0;
    	margin: .5em auto;
    	display: table;
    	background-color: transparent;
    	-webkit-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-o-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-moz-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .responsive_table * {
    	margin: 0;
    	padding: 0;
    }

    .responsive_table .table_data {
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
        	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
        	background-color: rgb(244, 244, 244);
       		background-color: rgb(var(--swatch-secondary-color, 244, 244, 244));
        	color: rgb(48, 48, 52);
    	color: rgb(var(--swatch-text-tertiary-color, 48, 48, 52));
    }

    .responsive_table .table_header {
    	display: table-header-group
    }

    .responsive_table .table_row {
    	display: table-row
    }

    .responsive_table .table_header_data {
    	--wght: 700;
    	display: table-cell;
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background: rgb(160, 160, 160);
    	background: rgb(var(--swatch-tertiary-color, 160, 160, 160));
    	color: rgb(252, 252, 252);
    	color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

    .responsive_table .table_data {
    	text-align: left;
    	display: table-cell
    }

}

@media screen and (max-width: 800px) {

    /* hide headings */
    .responsive_table .table_header {
    	display: none;
    }

    .responsive_table .table_row {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        background-color: rgb(252, 252, 252);
    	background-color: rgb(var(--swatch-background, 252, 252, 252));
    	padding: 0.375em;
    	border: 0.0625rem rgb(12, 12, 12) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 12, 12, 12)) solid;
    	margin-bottom: 1.250em;
    }

    .responsive_table .table_data {
    	padding: 1.95em 0.5em 0.5em 0.5em;
    	border: 0.0625rem rgb(12, 12, 12) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 12, 12, 12)) solid;
    	position: relative;
    }

    .responsive_table .table_row div:not(:nth-of-type(even)):last-of-type {
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 2;
    	grid-column: 1 / span 2;
    }

    /* Add labels */
    .responsive_table .table_data::before {
    	--wght: 700;
    	content: attr(data-label) "\A";
    	/* label + newline */
    	white-space: pre;
    	/* makes newline work */
    	font-size: 0.750em;
    	color: rgb(100, 46, 44);
    	color: rgb(var(--swatch-primary-darker, 100, 46, 44));
    	text-transform: uppercase;
    	width: -webkit-calc(100% - 0.7em);
    	width: -moz-calc(100% - 0.7em);
    	width: calc(100% - 0.7em);
    	height: 1.35em;
    	position: absolute;
    	margin-bottom: 1em;
    	top: 0;
    	left: 0;
    	background: rgb(160, 160, 160);
    	background: rgb(var(--swatch-tertiary-color, 160, 160, 160));
    	color: rgb(252, 252, 252);
    	color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
    	padding-left: 0.7em;
    	padding-top: 0.35em;
    	padding-bottom: 0.7em;
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

}

.responsive_table .table_data,
.responsive_table .table_header_data {
    vertical-align: top;
    text-align: left;
    margin: -0.0625rem 0 0 -0.0625rem;
}

@media screen and (min-width: 801px) {
    /* wide screens */

    .responsive_table {
    	background-color: rgb(var(--swatch-background, 252, 252, 252));;
    	border-collapse: collapse;
    	border-spacing: 0;
    	margin: .5em auto;
    	display: table;
    	background-color: transparent;
    	-webkit-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-o-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-moz-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .responsive_table * {
    	margin: 0;
    	padding: 0;
    }

    .responsive_table .table_data {
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background-color: rgb(244, 244, 244);
    	background-color: rgb(var(--swatch-secondary-color, 244, 244, 244));
    	color: rgb(48, 48, 52);
    	color: rgb(var(--swatch-text-tertiary-color, 48, 48, 52));
    }

    .responsive_table .table_header {
    	display: table-header-group
    }

    .responsive_table .table_row {
    	display: table-row
    }

    .responsive_table .table_header_data {
    	--wght: 700;
    	display: table-cell;
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background: rgb(170,170,170);
    	background: rgb(var(--swatch-tertiary-color, 170,170,170));
    	color: rgb(252,252,252);
    	color: rgb(var(--swatch-text-tertiary-color, 252,252,252));
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

    .responsive_table .table_data {
    	text-align: left;
    	display: table-cell
    }

}

@media screen and (max-width: 800px) {

    /* hide headings */
    .responsive_table .table_header {
    	display: none;
    }

    .responsive_table .table_row {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: 50% 50%;
    	grid-template-columns: 50% 50%;
    	background-color: white;
    	padding: 0.375em;
    	border: 0.0625rem rgb(204,204,204) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 204,204,204)) solid;
    	margin-bottom: 1.250em;
    }

    .responsive_table .table_data {
    	padding: 1.95em 0.5em 0.5em 0.5em;
    	border: 0.0625rem rgb(204,204,204) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 204,204,204)) solid;
    	position: relative;
    }

    .responsive_table .table_row div:not(:nth-of-type(even)):last-of-type {
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 2;
    	grid-column: 1 / span 2;
    }

    /* Add labels */
    .responsive_table .table_data::before {
    	--wght: 700;
    	content: attr(data-label) "\A";
    	/* label + newline */
    	white-space: pre;
    	/* makes newline work */
    	font-size: 0.750em;
    	color: rgb(136,136,136);
    	color: rgb(var(--swatch-primary-darker, 136,136,136));
    	text-transform: uppercase;
    	width: -webkit-calc(100% - 0.7em);
    	width: -moz-calc(100% - 0.7em);
    	width: calc(100% - 0.7em);
    	height: 1.35em;
    	position: absolute;
    	margin-bottom: 1em;
    	top: 0;
    	left: 0;
    	background: rgb(170,170,170);
    	background: rgb(var(--swatch-tertiary-color, 170,170,170));
    	color: rgb(252,252,252);
    	color: rgb(var(--swatch-text-secondary-color, 252,252,252));
    	padding-left: 0.7em;
    	padding-top: 0.35em;
    	padding-bottom: 0.7em;
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

}

(none)

(none)

```
responsive_table
```
```
table_header
```
```
table_row
```
```
table_header_data
```
```
table_row
```
```
table_data
```
```
responsive_table
```
```
table_header
```
```
table_row
```
```
table_header_data
```
```
table_row
```
```
table_data
```

[[iftags -component-backend]]
[!-- {$responsive-table-start}
[[module css]]
.responsive_table .table_data,
.responsive_table .table_header_data {
    vertical-align: top;
    text-align: left;
    margin: -0.0625rem 0 0 -0.0625rem;
}

@media screen and (min-width: 801px) {
    /* wide screens */

    .responsive_table {
        	background-color: rgb(252, 252, 252);
    	background-color: rgb(var(--swatch-background, 252, 252, 252));
    	border-collapse: collapse;
    	border-spacing: 0;
    	margin: .5em auto;
    	display: table;
    	background-color: transparent;
    	-webkit-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-o-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-moz-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .responsive_table * {
    	margin: 0;
    	padding: 0;
    }

    .responsive_table .table_data {
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
        	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
        	background-color: rgb(244, 244, 244);
       		background-color: rgb(var(--swatch-secondary-color, 244, 244, 244));
        	color: rgb(48, 48, 52);
    	color: rgb(var(--swatch-text-tertiary-color, 48, 48, 52));
    }

    .responsive_table .table_header {
    	display: table-header-group
    }

    .responsive_table .table_row {
    	display: table-row
    }

    .responsive_table .table_header_data {
    	--wght: 700;
    	display: table-cell;
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background: rgb(160, 160, 160);
    	background: rgb(var(--swatch-tertiary-color, 160, 160, 160));
    	color: rgb(252, 252, 252);
    	color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

    .responsive_table .table_data {
    	text-align: left;
    	display: table-cell
    }

}

@media screen and (max-width: 800px) {

    /* hide headings */
    .responsive_table .table_header {
    	display: none;
    }

    .responsive_table .table_row {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        background-color: rgb(252, 252, 252);
    	background-color: rgb(var(--swatch-background, 252, 252, 252));
    	padding: 0.375em;
    	border: 0.0625rem rgb(12, 12, 12) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 12, 12, 12)) solid;
    	margin-bottom: 1.250em;
    }

    .responsive_table .table_data {
    	padding: 1.95em 0.5em 0.5em 0.5em;
    	border: 0.0625rem rgb(12, 12, 12) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 12, 12, 12)) solid;
    	position: relative;
    }

    .responsive_table .table_row div:not(:nth-of-type(even)):last-of-type {
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 2;
    	grid-column: 1 / span 2;
    }

    /* Add labels */
    .responsive_table .table_data::before {
    	--wght: 700;
    	content: attr(data-label) "\A";
    	/* label + newline */
    	white-space: pre;
    	/* makes newline work */
    	font-size: 0.750em;
    	color: rgb(100, 46, 44);
    	color: rgb(var(--swatch-primary-darker, 100, 46, 44));
    	text-transform: uppercase;
    	width: -webkit-calc(100% - 0.7em);
    	width: -moz-calc(100% - 0.7em);
    	width: calc(100% - 0.7em);
    	height: 1.35em;
    	position: absolute;
    	margin-bottom: 1em;
    	top: 0;
    	left: 0;
    	background: rgb(160, 160, 160);
    	background: rgb(var(--swatch-tertiary-color, 160, 160, 160));
    	color: rgb(252, 252, 252);
    	color: rgb(var(--swatch-text-secondary-color, 252, 252, 252));
    	padding-left: 0.7em;
    	padding-top: 0.35em;
    	padding-bottom: 0.7em;
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

}
[[/module]]

[[div_ class="responsive_table"]]
[!----]

[!-- {$header-start}
    [[div_ class="table_header"]]
    	[[div_ class="table_row"]]
[!----]

[!-- {$header-cell-start}
    		[[div_ class="table_header_data"]]
[!----]		
    

[!-- {$header-cell-end}		
    		[[/div]]
[!----]

[!-- {$header-end}
    	[[/div]]
    [[/div]]
[!----]

[!-- {$row-start}
    [[div_ class="table_row"]]
[!----]

[!-- {$cell-start}
    	[[div_ class="table_data" data-label="{$cell-header}"]]
[!----]

[!-- {$cell-end}
    	[[/div]]
[!----]

[!-- {$row-end}
    [[/div]]
[!----]

[!-- {$responsive-table-end}
[[/div]]
[!----]
[[/iftags]]

[[iftags +component-backend]]
[[code]]
[!-- {$responsive-table-start}
[[module css]]
.responsive_table .table_data,
.responsive_table .table_header_data {
    vertical-align: top;
    text-align: left;
    margin: -0.0625rem 0 0 -0.0625rem;
}

@media screen and (min-width: 801px) {
    /* wide screens */

    .responsive_table {
    	background-color: rgb(var(--swatch-background, 252, 252, 252));;
    	border-collapse: collapse;
    	border-spacing: 0;
    	margin: .5em auto;
    	display: table;
    	background-color: transparent;
    	-webkit-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-o-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	-moz-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    	transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .responsive_table * {
    	margin: 0;
    	padding: 0;
    }

    .responsive_table .table_data {
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background-color: rgb(244, 244, 244);
    	background-color: rgb(var(--swatch-secondary-color, 244, 244, 244));
    	color: rgb(48, 48, 52);
    	color: rgb(var(--swatch-text-tertiary-color, 48, 48, 52));
    }

    .responsive_table .table_header {
    	display: table-header-group
    }

    .responsive_table .table_row {
    	display: table-row
    }

    .responsive_table .table_header_data {
    	--wght: 700;
    	display: table-cell;
    	padding: 0.625em;
    	border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
    	border: .0625rem solid rgba(var(--swatch-alternate-color, 66, 66, 72), 0.25) !important;
    	background: rgb(170,170,170);
    	background: rgb(var(--swatch-tertiary-color, 170,170,170));
    	color: rgb(252,252,252);
    	color: rgb(var(--swatch-text-tertiary-color, 252,252,252));
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

    .responsive_table .table_data {
    	text-align: left;
    	display: table-cell
    }

}

@media screen and (max-width: 800px) {

    /* hide headings */
    .responsive_table .table_header {
    	display: none;
    }

    .responsive_table .table_row {
    	display: -ms-grid;
    	display: grid;
    	-ms-grid-columns: 50% 50%;
    	grid-template-columns: 50% 50%;
    	background-color: white;
    	padding: 0.375em;
    	border: 0.0625rem rgb(204,204,204) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 204,204,204)) solid;
    	margin-bottom: 1.250em;
    }

    .responsive_table .table_data {
    	padding: 1.95em 0.5em 0.5em 0.5em;
    	border: 0.0625rem rgb(204,204,204) solid;
    	border: 0.0625rem rgb(var(--swatch-text-tertiary-color, 204,204,204)) solid;
    	position: relative;
    }

    .responsive_table .table_row div:not(:nth-of-type(even)):last-of-type {
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 2;
    	grid-column: 1 / span 2;
    }

    /* Add labels */
    .responsive_table .table_data::before {
    	--wght: 700;
    	content: attr(data-label) "\A";
    	/* label + newline */
    	white-space: pre;
    	/* makes newline work */
    	font-size: 0.750em;
    	color: rgb(136,136,136);
    	color: rgb(var(--swatch-primary-darker, 136,136,136));
    	text-transform: uppercase;
    	width: -webkit-calc(100% - 0.7em);
    	width: -moz-calc(100% - 0.7em);
    	width: calc(100% - 0.7em);
    	height: 1.35em;
    	position: absolute;
    	margin-bottom: 1em;
    	top: 0;
    	left: 0;
    	background: rgb(170,170,170);
    	background: rgb(var(--swatch-tertiary-color, 170,170,170));
    	color: rgb(252,252,252);
    	color: rgb(var(--swatch-text-secondary-color, 252,252,252));
    	padding-left: 0.7em;
    	padding-top: 0.35em;
    	padding-bottom: 0.7em;
    	font-weight: 700;
    	font-weight: var(--wght, 700);
    }

}
[[/module]]

[[div_ class="responsive_table"]]
[!----]

[!-- {$header-start}
    [[div_ class="table_header"]]
    	[[div_ class="table_row"]]
[!----]

[!-- {$header-cell-start}
    		[[div_ class="table_header_data"]]
[!----]		
    

[!-- {$header-cell-end}		
    		[[/div]]
[!----]

[!-- {$header-end}
    	[[/div]]
    [[/div]]
[!----]

[!-- {$row-start}
    [[div_ class="table_row"]]
[!----]

[!-- {$cell-start}
    	[[div_ class="table_data" data-label="{$cell-header}"]]
[!----]

[!-- {$cell-end}
    	[[/div]]
[!----]

[!-- {$row-end}
    [[/div]]
[!----]

[!-- {$responsive-table-end}
[[/div]]
[!----]
[[/code]]
[[/iftags]]

Responsive Tables Source

Module Styles

Inline Styles

Includes

CSS Classes

Page Source