consumerportal/css/src/table.css

mydna Custimised for you

/* Tables */

table { 
	margin: 1.6rem -1.6rem 1.6rem -1.6rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.3rem;
	width: calc(100% + 3.2rem);
}

table.exclusively {
	margin: -1.6rem -1.6rem -1.6rem -1.6rem;
}

table.bottom {
	margin: 2rem -1.6rem -1.6rem -1.6rem;
}

table thead tr {
	background-color: #eee;
	color: #006eb7;
}

table thead td,
table th {
	font-weight: bold;
}

table tbody tr {
	background-color: #f8f8f8;
}

table tbody tr:nth-child(odd) {
	background-color: #fff;
}

table th,
table td { 
	padding: 1rem;
	text-align: left;
	vertical-align: top;
}

table th:first-child,
table td:first-child {
	padding-left: 1.6rem;
}

table th:last-child,
table td:last-child {
	padding-right: 1.6rem;
}

table td.link {
	text-align: right;
}

table td.link a {
	background-color: #006eb7;
	border-bottom: none;
	color: #fff;
	display: inline-block;
	font-size: 0.95em;
	margin: -0.4rem -0.7rem;
	padding: 0.4rem 0.7rem;
}

table td.link a:hover {
	background-color: #f7a824;
}

table td:not(.link) a {
	display: inline;
}



table td.linkleft {
	text-align: left;
}

table td.linkleft a {
	background-color: #006eb7;
	border-bottom: none;
	color: #fff;
	display: inline-block;
	font-size: 0.95em;
	margin: -0.4rem 0;
	padding: 0.4rem 0.7rem;
}

table td.linkleft a:hover {
	background-color: #f7a824;
}

@media screen and (min-width: 621px) {

	table td.good,
	table td.bad,
	table td.possible,
	table td.neutral {
		padding-left: 3.5rem;
		position: relative;
	}

	table td.good::before {
		color: #87b925;
		content: "\f10c";
		font-family: FontAwesome;
		font-size: 2rem;
		left: 1rem;
		position: absolute;
		top: 1.2rem;
	}

	table td.bad::before {
		color: #f00;
		content: "\f10c";
		font-family: FontAwesome;
		font-size: 2rem;
		left: 1rem;
		position: absolute;
		top: 1.2rem;
	}
	
	table td.possible::before {
		color: #ff8913;
		content: "\f10c";
		font-family: FontAwesome;
		font-size: 2rem;
		left: 1rem;
		position: absolute;
		top: 1.2rem;
	}

	table td.neutral::before {
		color: #bbb;
		content: "\f10c";
		font-family: FontAwesome;
		font-size: 2rem;
		left: 1rem;
		position: absolute;
		top: 1.2rem;
	}

}

@media screen and (max-width: 620px) {
	
	table tbody tr {
		background-color: #fff;
		border-bottom: 1px solid #d9d9d9;
	}
	table tbody tr:last-child {
		border-bottom: none;
	}

	table tbody tr:nth-child(odd) {
		background-color: #f8f8f8;
	}
	
	table thead {
		display: none;
	}
	
	table tbody td { 
		display: block;
		float: left;
        clear: left;
        width: 100%;
		padding: 1.2rem 1.6rem 0; 
	}
  
	table tbody td:last-child { 
		padding-bottom: 1.2rem;
	}
  
	table tbody td:before {
		color: #006eb7;
		content: attr(data-th);
		font-weight: bold;
		display: block;
	}
	
	table td.good,
	table td.bad,
	table td.possible,
	table td.neutral {
		font-weight: bold;
	}
	
}


td.good,
td.bad,
td.neutral,
td.possible{
  font-weight:bold;
}

td.good:before,
td.bad:before,
td.neutral:before,
td.possible:before{
  font-weight:normal!important;
}