horizontal scrollbar not working for the headers - html

Question

I have multiple coloumns in the table, the header of the table is fixed. Some of the columns in the header (last coloumns) are not listed inside the panel. Please see the attached demo here
When the number of coloumns are more horizontal scrollbar is appearing, but issue is headers are not scrolling and listed outside the panel. Please find the demo here.
html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table class="table" border="1">
<thead>
<tr>
<td>Namffffffffffffffffffffffffe</td>
<td>phone</td>
<td>Address</td>
<td>Street</td>
<td>City</td>
<td>Pin</td>
<td>Comments</td>
<td>info</td>
<td>Amount</td>
<td>percentage</td>
<td>total</td>
</tr>
</thead>
<tbody>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr>
<tr>
<td>AAAAdddddddddddddddddddddddd</td>
<td>323232</td>
<td>BBBBB</td>
<td>aasdd</td>
<td>dfgdfg</td>
<td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
<td>adasdsadasd</td>
<td>12312</td>
<td>4</td>
<td>555</td>
</tr> </tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
css code:
.modal-body {
overflow-y: auto;
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

Answer 1

Edited your css code. Hope this helps
.modal-body {
overflow-y: auto;
}
tbody {
}
thead, tbody tr {
}
thead {
width: calc( 100% - 1em )
}
table {border-collapse:collapse; height:300px;overflow: auto;
display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}