Responsive tables

by Jasper Stevens

HTML

<div class="table-layout">
					<h2>Mijn bestellingen</h2>
					<table class="overflow">
						<thead>
							<tr>
								<td>Ordernummer</td>
								<td>Datum</td>
								<td>Bedrag</td>
								<td>Factuur</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>93289824</td>
								<td>12-12-2015</td>
								<td>€ 150,49</td>
								<td><a href="#">Factuur (PDF)</a></td>
							</tr>
							<tr>
								<td>93289824</td>
								<td>12-12-2015</td>
								<td>€ 150,49</td>
								<td><a href="#">Factuur (PDF)</a></td>
							</tr>
							<tr>
								<td>93289824</td>
								<td>12-12-2015</td>
								<td>€ 150,49</td>
								<td><a href="#">Factuur (PDF)</a></td>
							</tr>
						</tbody>
					</table>
				</div>

CSS

table {
    border-spacing: 0;
    width: 100%;
}
table thead {
    background: #f0f0f0;
    color: #333;
}
table tr td {
    min-width: 90px;
}
table thead tr td {
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
}
table tr td:first-child {
    padding: 5px 10px 5px 15px;
}
table.overflow {
  overflow-x: auto;
  display: block;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d0e2ff;
border: 2px solid #13499f;
border-radius: 5px; 
}
::-webkit-scrollbar-track {
background-color: #13499f; 
border-radius: 5px; 
}

JavaScript

//detecteer of tabel overflow heeft
$(window).on("resize", function () {
  if ($(".tekstpagina > div").prop('scrollWidth') > $(".tekstpagina > div").width() ) {
    $('.account table').addClass('overflow');
  }
  else {

  }	
}).resize();