Stackable Responsive Tables CSS Question

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?

/* 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!

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?

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:";
}