How to put a scrollbar in a tbody without breaking columns alignment - html

Question

I am working on on a table right now and, I need to include a scrollbar on the y axis. My problem is that the scrollbar is breaking the alignment of my <tbody> and <thead> columns.
I have tried some stuff with calc() to correct the width of the <td> but, it wasn't a very successful attempt. I also tried making the <th> in thead larger than 100% in width when you add them so that it overflows over the scrollbar but, it did not work.
I don't really know what to do, if any of you guys see what could solve the problem, please tell me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body, .main-container {
background-color: #fbe1c8;
}
/**** Table design ****/
table.tableSection thead {
float: left;
width: 100%
}
table.tableSection tbody {
float: left;
width: 100%
}
table.tableSection tbody {
overflow-y: scroll;
height: 150px
}
.lbl {
padding-left: 5px;
}
.libelleTableauTop {
color: black;
font-size: 8pt;
font-family: Arial;
border-color: #fbe1c8;
margin-top: 0em;
margin-bottom: 0em;
background-color: #ffa863;
}
.libelleTableauBot th {
border-color: #fbe1c8;
margin-top: 0em;
margin-bottom: 0em;
background-color: #ffa863;
}
/*** Parent row ***/
.parent {
height: 5px;
background-color: #fbe1c8;
font-weight:bold;
}
.parent:hover {
background-color:#4c94e8
}
.myCheckbox {
width: 1%
}
.garantie {
width: 29%
}
.valPrec {
width: 14%
}
.cotisPrec {
width: 14%
}
.indiceComp {
width: 7%
}
.valTerme {
width: 14%
}
.cotisTerme {
width: 14%
}
.varIndice {
width: 7%
}
th:hover {
background-color:#4c94e8
}
table, th, td {
border: 1px solid #fbe1c8;
}
<table class="tableSection">
<thead class="libelleTableauTop">
<tr>
<th colSpan="2">Garanties</th>
<th colSpan="2">SITUATION PRECEDENTE</th>
<th rowSpan="2">Mesure Terme<br><p>Indice compris</p></th>
<th colSpan="2">SITUATION TERME</th>
<th rowSpan="2">Variation Indice</th>
</tr>
<tr class="libelleTableauBot">
<th colSpan="2">Libellé Assiette</th>
<th>Valeur Assiette</th>
<th>Cotis. TTC Taux</th>
<th>Valeur Assiette</th>
<th>Cotis. TTC Taux</th>
</tr>
<tr>
<th width="1%"></th>
<th width="29%"></th>
<th width="14%"></th>
<th width="14%"></th>
<th width="7%"></th>
<th width="14%"></th>
<th width="14%"></th>
<th width="7%"></th>
</tr>
</thead>
<tbody>
<tr class="parent">
<td class="myCheckbox"></td>
<td class="lbl garantie">Responsabilité civile ava</td>
<td class="valPrec"></td>
<td class="garNbr cotisPrec">150,00</td>
<td class="garNbr indiceComp">2,00 %</td>
<td class="valTerme"></td>
<td class="garNbr cotisTerme">150,00</td>
<td class="varIndice"></td>
</tr>
</tbody>
</table>