Scrollable tbody

by babaikawow

HTML

<div class="container">
<table class="table" border = 1; >  <!-- fixed width header -->
						    <thead >
							    <tr>
							    	<th class="tbDataId" >№</th>
							        <th class="tbDataName">Працівник</th>
							        <th class="tbDataData">Дата</th>
							        <th class="tbDataData">Дійсно до</th>
							        <th class="tbDataDiseases">Критерій1</th>
							        <th class="tbDataDiseases">Критерій2</th>
							        <th class="tbDataDiseases">Критерій3</th>
							        <th class="tbDataDiseases">Критерій4</th>
							        <th class="tbDataDiseases">Критерій5</th>  
							    </tr>
						    </thead>  
						</table> 

						<div class="scrollTable"> <!-- scrolling block -->
							<table class="table" border = 1;>
								 <tbody>
                   <tr>
                      <td class="tbDataId" >№</td>
							        <td class="tbDataName">Працівник</td>
							        <td class="tbDataData">Дата</td>
							        <td class="tbDataData">Дійсно до</td>
							        <td class="tbDataDiseases">Критерій1</td>
							        <td class="tbDataDiseases">Критерій2</td>
							        <td class="tbDataDiseases">Критерій3</td>
							        <td class="tbDataDiseases">Критерій4</td>
							        <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
							        <td class="tbDataName">Працівник</td>
							        <td class="tbDataData">Дата</td>
							        <td class="tbDataData">Дійсно до</td>
							        <td class="tbDataDiseases">Критерій1</td>
							        <td class="tbDataDiseases">Критерій2</td>
							        <td class="tbDataDiseases">Критерій3</td>
							        <td class="tbDataDiseases">Критерій4</td>
							        <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
							        <td class="tbDataName">Працівник</td>
							     ...

CSS

*{
  box-sizing: border-box;
}

.container{
 width:1000px;
}
.scrollTable{
  
	overflow: scroll;
  overflow-x: hidden;
	height: 100px;
} 
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse; 

}

/*   Styles of the th and td  */

/* Id */
.tbDataId{
	width:5%;
}

/* Дата,
Дійсно до */
.tbDataData{
	/*width:170px;*/
	width: 15%;
}

/* П І Б */
.tbDataName{
	width: 15%;
}

/*Критерії */
.tbDataDiseases{
	width:10%;
}