unable to fix the issue when used bootstrap classes - html

Question

I see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows.
I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice.
To view the sample code click here.
Sample 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 id="myTable" class="table table-fixedheader table-bordered table-striped">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2Header2Header2Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>