How to make a fixed table header scroll horizontally with the table

sessions · April 18, 2014, 3:54pm

The demo code below has a fixed table header row and scrollable tbody data. Is there any way to get the table headers to scroll horizontally with the tbody data? and still be the same with as their respective column?


<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		
		
		<style type="text/css">
			html,body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			.tablewrap{
				margin: 0 auto;
				width: 600px;
				/*overflow-x: auto;*/
				height: 100%;
			}
			.list{
				height: 95%;
			}
			tbody{
				display: block;
				overflow-x: auto;
				height: 85%;
				width: 600px;
			}
			thead tr{
				display: block;
				position: relative;
			}
			.footer{
				background: red;
				margin: 0 auto;
				position: fixed;
				bottom: 0;
				width: 600px;
			}
	
		</style>
    </head>
    <body>
	
	
		
	
        <div class="tablewrap">
		
		<table class="list">
		<caption>10,938 records found</caption>
		<thead>
			<tr>
				<th>col 1</th>
				<th>col 2</th>
				<th>col 3</th>
				<th>col 4</th>
				<th>col 5</th>
				<th>col 6</th>
				<th>col 7</th>
				<th>col 8</th>
				<th>col 9</th>
				<th>col 10</th>
				<th>col 11</th>
				<th>col 12</th>
				<th>col 13</th>
				<th>col 14</th>
				<th>col 15</th>
				<th>col 16</th>
				<th>col 17</th>
				<th>col 18</th>
				<th>col 19</th>
				<th>col 20</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
			<tr>
				<td>aaaaaaaaa</td><td>bbbbbbbbb</td><td>ccccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffffff</td><td>ggggggggggg</td><td>hhhhhhhhh</td>
				<td>iiiiiiiiiii</td><td>jjjjjjjjjj</td><td>kkkkkkkkk</td><td>llllllllll</td><td>mmmmmmmmmmm</td><td>nnnnnnnnnnn</td><td>ooooooooo</td>
				<td>pppppppppp</td><td>qqqqqqqqqqqq</td><td>rrrrrrrrrrrr</td><td>ssssssssssss</td><td>tttttttttttt</td>
			</tr>
		</tbody>
	</table>
	
	<div class="footer">
		<p>footer</p>
	</div>

	</div> <!-- end table wrap -->
	
	
	
    </body>
</html>

PaulOB · April 19, 2014, 7:55am

Hi,

That’s not possible with CSS alone I’m afraid and indeed your demo is only working in Chrome. The method you are using is only suitable for fixed width headers because you are divorcing the head section from the body of the table because you have set tbody to display:block and therefore there is no more relationship between the header and the table content itself.

This has always been the drawback of all those approaches and are no different form simply having separate tables for the header and the body (which is effectively what your code does). I created a fluid version many many many years ago here but even that won’t scroll sideways.

You will need to look to provide the functionality through javascript. There are a number of scripts about but I haven’t tested them.

sessions · April 19, 2014, 12:31pm

thanks Paul! lucky js is an option for this project.