[Support request] Stackable Responsive Tables CSS Question

[johnzoro]

Hi Peeps.

Not really a theme question, more of a generic CSS question.

I have found out a way to create what I wanted in terms of a table that when you go onto it on a mobile it changes to a stackable table

http://aged.org.uk/test/test.html

i have the html and css here on this test page of mine

what i want to know is, what css would i need to add if say i wanted to do another table with different information/catergories

ie not “good points” “bad points” etc

[Tom]

Not too sure what you mean?

If you wanted to do another table, why not just copy this one you have working and change the text?

[johnzoro]

/* responsive tables */
.responsive-stacked-table {
	width: 100%;
	border: 1px solid #ddd;
	border-collapse: collapse;
	table-layout: fixed;
}
.responsive-stacked-table th,
.responsive-stacked-table td {
	padding: 10px;
	border-top: 1px solid #ddd;
}
.responsive-stacked-table thead {
	background: #eee;
	border-bottom: 3px solid #ddd;
}
.responsive-stacked-table tr:nth-child(even) {
	background: #f5f5f5;
}
.responsive-stacked-table .fa {
	margin-right: 5px;
}
.responsive-stacked-table .fa-check-circle {
	color: #690;
}
.responsive-stacked-table .fa-times-circle {
	color: #c00;
}

.responsive-stacked-table.with-mobile-labels {
	font-size: .85em;
}

@media (max-width: 1199px) {
	.container {
		width: auto;
		padding: 0 10px;
	}
}

@media (max-width: 767px) {
	.responsive-stacked-table thead {
		display: none;
	}
	.responsive-stacked-table tr,
	.responsive-stacked-table th,
	.responsive-stacked-table td {
		display: block;
	}
	.responsive-stacked-table td {
		border-top: none;
	}
	.responsive-stacked-table tr td:first-child {
		border-top: 1px solid #ddd;
		font-weight: bold;
	}
	.responsive-stacked-table.with-mobile-labels tr td:first-child {
		font-weight: 300;
	}
	.responsive-stacked-table.with-mobile-labels td:before {
		display: block;
		font-weight: bold;
	}
	.responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before {
		content: "Model:";
	}
	.responsive-stacked-table.with-mobile-labels td:nth-of-type(2):before {
		content: "Good Points:";
	}
	.responsive-stacked-table.with-mobile-labels td:nth-of-type(3):before {
		content: "Bad Points:";
	}
	.responsive-stacked-table.with-mobile-labels td:nth-of-type(4):before {
		content: "Conclusion:";
	}
	.responsive-stacked-table.with-mobile-labels td:nth-of-type(5):before {
		content: "Check Price:";
	}
}

In the css it lists the catergorys. If i change the css it will affect my 1st table. I want more than one on the same site.

could i just copy some of the css and rename it

@media (max-width: 767px) {
	.responsive-stacked-table2 thead {
		display: none;
	}
	.responsive-stacked-table2 tr,
	.responsive-stacked-table2 th,
	.responsive-stacked-table2 td {
		display: block;
	}
	.responsive-stacked-table2 td {
		border-top: none;
	}
	.responsive-stacked-table2 tr td:first-child {
		border-top: 1px solid #ddd;
		font-weight: bold;
	}
	.responsive-stacked-table2.with-mobile-labels tr td:first-child {
		font-weight: 300;
	}
	.responsive-stacked-table2.with-mobile-labels td:before {
		display: block;
		font-weight: bold;
	}
	.responsive-stacked-table2.with-mobile-labels td:nth-of-type(1):before {
		content: "Color:";
	}
	.responsive-stacked-table2.with-mobile-labels td:nth-of-type(2):before {
		content: "Age:";
	}
	.responsive-stacked-table2.with-mobile-labels td:nth-of-type(3):before {
		content: "Material";
	}
	.responsive-stacked-table2.with-mobile-labels td:nth-of-type(4):before {
		content: "Brand:";
	}
	.responsive-stacked-table2.with-mobile-labels td:nth-of-type(5):before {
		content: "Flavour:";
	}
}

would this work? i’ll test it!

[johnzoro]

Desktop table ^ I can edit the catergories in this if i want to create another table with different catergories that’s not a problem

but if you look at the mobile version

These catergories are in the css.

Now I could change the existing css to use different catergories but that would affect my existing table.

If i wanted 2 or more tables i would imagine i would need to add more css with the new catergories?

[Tom]

What you’ve done by giving the table a different class should work.

You can even keep the existing class and then add on to it:

class="responsive-stacked-table rst-v2"

Then the CSS:

.responsive-stacked-table.rst-v2.with-mobile-labels td:nth-of-type(1):before {
    content: "Color:";
}

[Author]

Posts