<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Team</th>
<th>1st</th>
<th>2nd</th>
<th>3rd</th>
<th>4th</th>
<th>5th</th>
<th>6th</th>
<th>7th</th>
<th>8th</th>
<th>9th</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Team">Toronto</td>
<td data-th="1st">0</td>
<td data-th="2nd">0</td>
<td data-th="3rd">0</td>
<td data-th="4th">4</td>
<td data-th="5th">0</td>
<td data-th="6th">1</td>
<td data-th="7th">0</td>
<td data-th="8th">0</td>
<td data-th="9th">0</td>
<td data-th="Final">5</td>
</tr>
<tr>
<td data-th="Team">San Francisco</td>
<td data-th="1st">0</td>
<td data-th="2nd">0</td>
<td data-th="3rd">0</td>
<td data-th="4th">4</td>
<td data-th="5th">0</td>
<td data-th="6th">0</td>
<td data-th="7th">0</td>
<td data-th="8th">0</td>
<td data-th="9th">0</td>
<td data-th="Final">4</td>
</tr>
</tbody>
</body>
</html>
// Code goes here
/* Styles go here */
table {
border: 1px solid #ddd;
}
tr:nth-child(odd) {
background-color: #f9f9f9;
}
@media screen and (max-width: 500px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
left: 6px;
content: attr(data-th);
font-weight: bold;
}
td:first-of-type {
font-weight: bold;
}
}