Responsiv table and fixed head

In this example below you will see how to do a Responsiv table and fixed head with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Peteichuk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Peteichuk ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsiv table and fixed head</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive table</title>
</head>
<body>
	<div class="container">
		<div id="responsivTable">
			<table>
				<thead>
					<tr>
						<th>
							<div class="content-td">
								text header 1
							</div>
						</th>
						<th>
							<div class="content-td">
								text 2
							</div>
						</th>
						<th>
							<div class="content-td">
								text 3
							</div>
						</th>
						<th>
							<div class="content-td">
								text 4
							</div>
						</th>
						<th>
							<div class="content-td">
								text 5
							</div>
						</th>
						<th>
							<div class="content-td">
								text test 6
							</div>
						</th>
						<th>
							<div class="content-td">
								text 7
							</div>
						</th>
						<th>
							<div class="content-td">
								text 8
							</div>
						</th>
						<th>
							<div class="content-td">
								text 9
							</div>
						</th>
						<th>
							<div class="content-td">
								text 10
							</div>
						</th>
						<th>
							<div class="content-td">
								text user 11
							</div>
						</th>
						<th>
							<div class="content-td">
								text 12
							</div>
						</th>
						<th>
							<div class="content-td">
								text 13
							</div>
						</th>
						<th>
							<div class="content-td">
								text 14
							</div>
						</th>
						<th>
							<div class="content-td">
								text 15
							</div>
						</th>
						<th>
							<div class="content-td">
								text dist 16
							</div>
						</th>
						<th>
							<div class="content-td">
								text 17
							</div>
						</th>
						<th>
							<div class="content-td">
								text 18
							</div>
						</th>
						<th>
							<div class="content-td">
								text src table test 19
							</div>
						</th>
						<th>
							<div class="content-td">
								text 20
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="content-td">
								text 1
							</div>
						</td>
						<td>
							<div class="content-td">
								text 2
							</div>
						</td>
						<td>
							<div class="content-td">
								text 3
							</div>
						</td>
						<td>
							<div class="content-td">
								text 4
							</div>
						</td>
						<td>
							<div class="content-td">
								text 5
							</div>
						</td>
						<td>
							<div class="content-td">
								text 6
							</div>
						</td>
						<td>
							<div class="content-td">
								text 7
							</div>
						</td>
						<td>
							<div class="content-td">
								text 8
							</div>
						</td>
						<td>
							<div class="content-td">
								text 9
							</div>
						</td>
						<td>
							<div class="content-td">
								text 10
							</div>
						</td>
						<td>
							<div class="content-td">
								text 11
							</div>
						</td>
						<td>
							<div class="content-td">
								text 12
							</div>
						</td>
						<td>
							<div class="content-td">
								text 13
							</div>
						</td>
						<td>
							<div class="content-td">
								text 14
							</div>
						</td>
						<td>
							<div class="content-td">
								text 15
							</div>
						</td>
						<td>
							<div class="content-td">
								text 16
							</div>
						</td>
						<td>
							<div class="content-td">
								text 17
							</div>
						</td>
						<td>
							<div class="content-td">
								text 18
							</div>
						</td>
						<td>
							<div class="content-td">
								text 19
							</div>
						</td>
						<td>
							<div class="content-td">
								text 20
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Peteichuk/responsiv-table-and-fixed-head-NavMXy */
* {
  margin: 0;
  padding: 0;
  outline: none;
}

.container {
  margin: 20px auto 0;
  /*width: 800px;*/
}

table td, table th {
  border-width: 1px;
  border-style: solid;
  border-right: none;
  border-top: none;
  padding: 8px 10px;
  /*border-color: #eee;*/
  box-sizing: border-box;
}

table th {
  border-top: 1px solid;
}

table th:last-child, table td:last-child {
  border-right: 1px solid;
}

table thead tr {
  background-color: #eee;
}

#responsivTable {
  position: relative;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  margin: 6px;
  overflow: auto;
  max-height: 400px;
}

#responsivTable table {
  border-spacing: 0;
  width: 100%;
}

#responsivTable th, #responsivTable td {
  white-space: nowrap;
}

#responsivTable.absolute table thead {
  position: absolute;
}

#responsivTable .content-td {
  width: 100%;
}


/*Downloaded from https://www.codeseek.co/Peteichuk/responsiv-table-and-fixed-head-NavMXy */
$(function (){
	setTimeout(function () {
		var table,
			theader,
			tbody,
			tbodyTr,
			tbodyTd,
			thead;

	    function tableInit(table) {
			table = table;
			theader = $(table).find('thead th');
			tbody = $(table).find('tbody');
			thead =  $(table).find('thead');

            if ($(tbody).find('tr')[0]) {
                tbodyTr = $(tbody).find('tr')[0];
                tbodyTd = $(tbodyTr).find('td');

                $(table).find('table').css('width', $(table).find('table').width());

                for (var i = 0; i < $(theader).length; i++) {
					$(theader[i]).css('width', '');

					var borderL = +getComputedStyle(theader[i]).borderLeftWidth.match(/\d*/)[0];
					var borderR = +getComputedStyle(theader[i]).borderRightWidth.match(/\d*/)[0];

                    $(theader[i]).css('width', theader[i].offsetWidth + borderL + borderR + 'px');
                    $(tbodyTd[i]).css('width', theader[i].offsetWidth + 'px');
                }

                $(table).addClass('absolute');
                $(table).css('maxHeight', (+getComputedStyle($(table)[0]).maxHeight.match(/\d*/)[0] - $(table).find('thead')[0].offsetHeight) + 'px');
                $(table).css('paddingTop', $(table).find('thead')[0].offsetHeight + 'px');

            	function scrolly() {
                    $(thead).css('top', $(table)[0].scrollTop + 'px');
                }

                $(table).scroll(scrolly);

                scrolly();
            }
		}
		tableInit();
		
		function tableUpdate() {
			console.log('update');
			$(table).removeClass('absolute');
			$(table).css('paddingTop', '');
			$timeout(function () {
				tableInit();
			}, 1000);
		}

		tableInit($('#responsivTable'));

	}, 1000);

});

Comments