<section>
<div>
<table>
  <thead>
  	<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Number</th>
			<th>City</th>
      <th>Team</th>
			<th>Position</th>
			<th>Sport</th>
			<th>College</th>
      <th>Age</th>
			<th>Active</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Demarcus</td>
			<td>Ware</td>
			<td>94</td>
			<td>Dallas</td>
      <td>Cowboys</td>
			<td>OLB</td>
			<td>Football</td>
			<td>Troy</td>
      <td>30</td>
			<td>Yes</td>
		</tr>
		<tr>
			<td>Tony</td>
			<td>Romo</td>
			<td>9</td>
			<td>Dallas</td>
      <td>Cowboys</td>
			<td>QB</td>
			<td>Football</td>
			<td>Eastern Illinois</td>
      <td>32</td>
			<td>Yes</td>
		</tr>
		<tr>
			<td>Jason</td>
			<td>Witten</td>
			<td>82</td>
			<td>Dallas</td>
      <td>Cowboys</td>
			<td>TE</td>
			<td>Football</td>
			<td>Tennessee</td>
      <td>30</td>
			<td>Yes</td>
		</tr>
	</tbody>
</table>
</div>
</section>
@import "compass/css3";

section {
  width: 80%;
  margin: 0 auto;
  position: relative;
  border-right: 2px dashed #ddd;
  border-left: 2px dashed #ddd;
}
table {
   width: 100%; 
  text-align: center;
  min-width: 700px;
}
th, td {
  width: 10%; 
  padding: 10px 0;
}
th {
  color: #002E4D;  
}
tr {
  border-top: 4px solid #fff;
  background: #F1F1F0;
  &:nth-child(even) {
     background: #f9f9f9; 
  }
  thead &{
    background: #aaa;
  }
}
div {
  
  overflow-x:scroll;
}
@media only screen 
and (max-width : 700px) {
section:after {
    content:'';
  	position: absolute;
		z-index: 10;
		top: 0;
		bottom: 0;
		right: 0;
		width: 10%;
		background: -webkit-linear-gradient(left, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:    -moz-linear-gradient(left, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:     -ms-linear-gradient(left, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:      -o-linear-gradient(left, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:     linear-gradient(to right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
	}
section:before {
		content:'';
		position: absolute;
		z-index: 10;
		top: 0;
		bottom: 0;
		left: 0;
		width: 10%;
		background: -webkit-linear-gradient(right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:    -moz-linear-gradient(right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:     -ms-linear-gradient(right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:      -o-linear-gradient(right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
		background:       linear-gradient(to left, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2));
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js