JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<table border="0" class="table__cookies">
<tbody>
<tr>
<td><strong>Cookie source</strong></td>
<td><strong>Cookie</strong></td>
<td><strong>Type of Cookie - Session or Persistent?</strong></td>
<td><strong>Category of Cookies - Essential / Analytics/ Preference/ Ad/ Targeting?</strong></td>
<td><strong>How long is the Cookie stored for?</strong></td>
<td><strong>1st or 3rd party Cookie?</strong></td>
<td><strong>Further information for 3rd party cookies</strong></td>
</tr>
<tr>
<td>dacbeachcroft.com</td>
<td>_ga</td>
<td>Persistent</td>
<td>Analytics</td>
<td>2 years</td>
<td>1st</td>
<td>N/A</td>
</tr>
<tr>
<td>dacbeachcroft.com</td>
<td>_gid</td>
<td><span>Persistent</span></td>
<td><span>Analytics</span></td>
<td>24 hours</td>
<td>1st</td>
<td>N/A</td>
</tr>
<tr>
<td>dacbeachcroft.com</td>
<td>_gat</td>
<td>Session</td>
<td><span>Analytics</span></td>
<td>1 minute</td>
<td>1st</td>
<td>N/A</td>
</tr>
<tr>
<td>AdWords</td>
<td>_gac_&lt;property-id&gt;</td>
<td><span>Persistent</span></td>
<td>Ad Targeting</td>
<td>90 days</td>
<td>3rd</td>
<td>For more information about AdWords cookies please see:<br /><a href="https://policies.google.com/technologies/types">https://policies.google.com/technologies/types</a></td>
</tr>
<tr>
<td>Wistia</td>
<td>__distillery</td>
<td><span>Persistent</span></td>
<td><span>Analytics</span></td>
<td>1 year</td>
<td>3rd</td>
<td rowspan="2">For more information about Wistia cookies please see: <br /><a href="https://wistia.com/privacy">https://wistia.com/privacy</a></td>
</tr>
<tr>
<td>Wistia</td>
<td>muxData</td>
<td><span>Persistent</span></td>
<td><span>Analytics</span></td>
<td>20 years</td>
<td>3rd</td>
</tr>
</tbody>
</table>

CSS

body {
  padding: 20px;
}









table {
    background: #fff;
    border: solid 1px #ddd;
    margin-bottom: 1.25rem;
    table-layout: auto
}

table caption {
    background: transparent;
    color: #222;
    font-size: 1rem;
    font-weight: bold
}

table thead {
    background: #f5f5f5
}

table thead tr th,table thead tr td {
    color: #222;
    font-size: .875rem;
    font-weight: bold;
    padding: .5rem .625rem .625rem
}

table tfoot {
    background: #f5f5f5
}

table tfoot tr th,table tfoot tr td {
    color: #222;
    font-size: .875rem;
    font-weight: bold;
    padding: .5rem .625rem .625rem
}

table tr th,table tr td {
    color: #222;
    font-size: .875rem;
    padding: .5625rem .625rem;
    text-align: left
}

table tr.even,table tr.alt,table tr:nth-of-type(even) {
    background: #f9f9f9
}

table thead tr th,table tfoot tr th,table tfoot tr td,table tbody tr th,table tbody tr td,table tr td {
    display: table-cell;
    line-height: 1.125rem
}









.table__wrapper {
    position: relative;
    margin-bottom: 1.25rem
}

.table__wrapper table {
    margin-bottom: 0
}

.table__scroll {
    overflow-x: auto;
    overflow-y: visible
}

.table__shadow {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    z-index: 2;
    display: none
}

.table__shadow:before {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 3;
    -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    transform: translatey(-50%);
    width: 26px;
    height: 26px;
    background-color: #a1daf8;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background-size: 18px 18px;
    background-position: center center;
    background-repeat: no-repeat
}

.table__shadow-left {
    left: 0;
    border-left: 1px solid #bdbdbd;
    background-image: linear-gradient(to right,#e0e0e0,rgba(255,255,255,0))
}

.table__shadow-left:before...

JavaScript

//////////////////
/////
///// SCROLLABLE TABLE
/////
//////////////////
	if ($(".table__cookies").length > 0) {
		$('.table__cookies').wrap('<div class="table__wrapper"><div class="table__scroll" data-table-scroll></div></div>');
		$('.table__cookies').before('<div class="table__shadow table__shadow-left"></div><div class="table__shadow table__shadow-right"></div>');
	}
	if ($("[data-table-scroll]").length) {

		$("[data-table-scroll]").on("scroll", function () {
			var currentScrollLeftPosition = $(this).scrollLeft();
			if (currentScrollLeftPosition == 0) {
				$('.table__shadow-right').fadeIn("fast");
				$('.table__shadow-left').fadeOut("fast");
			}
			else {
				var maxScrollPosition = $(this)[0].scrollWidth - $(this).parent().outerWidth();
				if (currentScrollLeftPosition == maxScrollPosition) {
					$('.table__shadow-right').fadeOut("fast");
					$('.table__shadow-left').fadeIn("fast");
				} else {
					$('.table__shadow-right').fadeIn("fast");
					$('.table__shadow-left').fadeIn("fast");
				}
			}
		});

		$("[data-table-scroll]").trigger("scroll");

		//$(document).on('click', '.table__shadow', function () {
		$(".table__shadow").on("click", function () {
			var scrollContainer = $(".table__scroll"),
				horizontalScroll;
			if ($(this).hasClass("table__shadow-right")) {
				horizontalScroll = ((scrollContainer.width() / 4)) + scrollContainer.scrollLeft();
				scrollContainer.animate({
					scrollLeft: horizontalScroll,
				})
			} else if ($(this).hasClass("table__shadow-left")) {
				horizontalScroll = ((scrollContainer.width() / 4)) - scrollContainer.scrollLeft();
				scrollContainer.animate({
					scrollLeft: -horizontalScroll,
				})
			}
		})
	}