table {
	width: 100%;
	border-collapse: collapse;
	margin:10px auto;
	padding-left:10%;
	padding-right:10%;
}

/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
	padding: 10px;
	background: #ef1c22;
	color: #fff;
	border: 1px solid #b60909;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}
td {
	padding: 10px;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 20px;
	color: #333;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.html5gallery-container-0 {
width: 100%;
margin-left:auto;
margin-right:auto;
}
 table {
width: 100%;
padding-left:0;
padding-right:0;
}

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
 tr {
border: 1px solid #ccc;
}
 td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #b9b9b9;
position: relative;
}
 td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Label the data */
content: attr(data-column);
 color: #000;
font-weight: bold;
}
}