Table header: fixed position

by Fiddel

HTML

<div class="wrapper">
      
	<div class="container">
		<table>
			<thead>
				<tr>
					<th>
						<span>lorem ipsum dolor sed amet nihi dolores nihil se</span>
					</th>
					<th>
						<span>Lorem</span>
					</th>
					<th>
						<span>ipsum dolores</span>
					</th>
				</tr>
			</thead>
			<tbody>
			<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>ddd</td>
					<td>d</td>
				</tr>
				<tr>
					<td>loe</td>
					<td>ipsum dolor sed amet ni</td>
					<td>dlorem ipsum dolor sed amet nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>ddd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>loe</td>
					<td>ipsum dolor sed amet ni</td>
					<td>dlorem ipsum dolor sed amet nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor ipsum dolor sed amet nihi dolor ipsum dolor sed amet nihi dolor sed amet nihi dolores nihil se</td>
					<td>dm dolor m dolor dd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>dm dolor m dolor dd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>dm dolor m dolor dd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>dm dolor m dolor dd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>ddd</td>
					<td>d</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil se</td>
					<td>dm dolor m dolor dd</td>
					<td>dlorem ipsum dolor sed amet nihi dolores nihil se</td>
				</tr>
				<tr>
					<td>lorem ipsum dolor sed amet nihi dolores nihil...

CSS

.wrapper {
		height: 300px;
		position: relative;
		padding-top: 36px; /* header height */
		border:1px dashed red;
		
	}
.container {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100%;background-color:pink;
}
table {
	background-color: white;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border-collapse:collapse;
	
	
}
th,td {
	border: 1px solid #ccc;
	padding: 5px;
	text-align: left;
}
thead th span{
	position: absolute;
	top: 0;
	text-align: left;
}


table {
	border-top:2px dashed orange;
}