Scroll Table

by Ryan Brackett

HTML

<div class="table-archive-container">
<div class="table-wrapper">
<table id="main">
	<tbody>
		<tr>
			<th scope="row">&nbsp;</th>
			<td>5/1/20</td>
			<td>
			<p>4/30/20</p>
			</td>
			<td>4/29/20</td>
			<td>4/28/20</td>
			<td>
			<p>4/27/20</p>
			</td>
			<td>4/24/20</td>
		</tr>
		<tr>
			<th scope="row">Confirmed positive patients currently being treated</th>
			<td>146</td>
			<td>153</td>
			<td>159</td>
			<td>153</td>
			<td>141</td>
			<td>132</td>
		</tr>
		<tr>
			<th class="indent" scope="row">
			<p>NGMC Gainesville</p>
			</th>
			<td>81</td>
			<td>84</td>
			<td>90</td>
			<td>88</td>
			<td>75</td>
			<td>74</td>
		</tr>
		<tr>
			<th class="indent" scope="row">
			<p>NGMC Braselton</p>
			</th>
			<td>21</td>
			<td>25</td>
			<td>28</td>
			<td>24</td>
			<td>25</td>
			<td>24</td>
		</tr>
		<tr>
			<th class="indent" scope="row">
			<p>NGMC Barrow</p>
			</th>
			<td>12</td>
			<td>12</td>
			<td>10</td>
			<td>11</td>
			<td>14</td>
			<td>10</td>
		</tr>
		<tr>
			<th class="indent" scope="row">
			<p>NGMC Lumpkin</p>
			</th>
			<td>11</td>
			<td>11</td>
			<td>10</td>
			<td>9</td>
			<td>7</td>
			<td>5</td>
		</tr>
		<tr>
			<th class="indent" scope="row">
			<p>New Horizons Limestone</p>
			</th>
			<td>21</td>
			<td>21</td>
			<td>21</td>
			<td>21</td>
			<td>20</td>
			<td>19</td>
		</tr>
		<tr>
			<th scope="row">
			<p>Patients awaiting test results</p>
			</th>
			<td>118</td>
			<td>152</td>
			<td>130</td>
			<td>112</td>
			<td>95</td>
			<td>46</td>
		</tr>
		<tr>
			<th scope="row">
			<p>Ventilator usage (% in use)</p>
			</th>
			<td>38%</td>
			<td>38%</td>
			<td>41%</td>
			<td>41%</td>
			<td>39%</td>
			<td>41%</td>
		</tr>
	</tbody>
</table>
</div>

<table id="clone">
</table>
</div>

CSS

/* START TABLE ARCHIVE FOR COVID-19 Data */
.table-archive-container {
  position: relative;
}
.table-archive-container .table-wrapper {
  overflow-x: auto;
  position: relative;
  width: 100%;
  background: white;
  max-width: 880px;
  box-shadow: 0px 10px 17px #00000030;
}
.table-archive-container p {margin: 0!important;}

.table-archive-container .table-wrapper table#main {
  position: relative;
  width: 100%;
  white-space: nowrap;
  border-spacing: 0;
}
.table-archive-container table#main, .table-archive-container table#clone {
  font-family: "Open Sans", sans-serif;
}
.table-archive-container table#main tbody, .table-archive-container table#clone tbody {
  display: block;
}
.table-archive-container .table-wrapper table#main td.latest {
  background: #ffffb6;
}
.table-archive-container table tr:first-of-type td, .table-archive-container table tr:first-of-type th {
  background: #353535 !important;
  color: white;
  border-color: #6b6b6b !important;
  /* font-weight: 600; */
  font-size: 15px;
  /* letter-spacing: 1px; */
  border-bottom: 0px!important;
}
.table-archive-container table tr:first-of-type td.latest {
  color: black;
  background: #e8e85e !important;
  /* border-left: none !important; */
  /* border-color: #9a9a2f !important; */
  /* font-weight: 600; */
}
.table-archive-container table#main th, .table-archive-container table#clone th {
  width: 50%;
  text-align: left;
  font-weight: 600;
  /* color: white; */
  background: white;
}
.table-archive-container table#main th, .table-archive-container table#main td, .table-archive-container table#clone th, .table-archive-container table#clone td {
  padding: 15px 20px;
  border-bottom: 1px solid #00000021;
  position: relative;
}
.table-archive-container table#main td, .table-archive-container table#clone td {
  border-left: 1px solid #4a4a4a45;
  text-align: center;
  vertical-align: middle;
  background: #f1f1f1;
}
.table-archive-container table#main th.indent, .table-archive-container table#clone...

JavaScript

var $target = $("#clone");

$("#main tr").each(function() {
  var $tds = $(this).children("th"),
    $row = $("<tr></tr>");
  $row.append($tds.eq(0).clone()).appendTo($target).appendTo($target);
});

$("#main tr").find("td:first-of-type").addClass("latest");