There seems to be an issue with IE11 and Flexbox when using Bootstrap tables.
My table row is set up like this:
https://i.sstatic.net/iLoNS.png
I have a table design that is scrollable to the right due to the numerous fields in it. The flex with column setup helps maintain the column widths.
This functionality works well in Chrome and Firefox, as shown in the image below:
https://i.sstatic.net/5exHB.png
However, in IE, it appears broken as the tbody row is shifted differently compared to the thead row. Both of them have the same structure and classes as shown in the first image.
https://i.sstatic.net/1Al82.png
Any suggestions on how to fix this? I need to support IE11 for this project and it's proving to be a challenge.
UPDATE: Here is the code for the table:
<table class="table-responsive table-sm">
<thead>
<tr class="d-flex">
<th class="col-1">Bla 1</th>
<th class="col-2">Bla 2</th>
<th class="col-2">Bla 3</th>
<th class="col-2">Bla 4</th>
<th class="col-2">Bla 5</th>
<th class="col-1">Bla 6</th>
<th class="col-1">Bla 7</th>
<th class="col-3">Bla 8</th>
<th class="col-3">Bla 9</th>
<th class="col-1">Bla 10</th>
<th class="col-3">Bla 11</th>
<th class="col-3">Bla 12</th>
<th class="col-3">Bla 13</th>
<th class="col-3">Bla 14</th>
<th class="col-2">15</th>
</tr>
</thead>
<tbody>
{% for item in bla %}
<tr class="d-flex">
<td class="col-1">{{ item.bla1 }}</td>
<td class="col-2"></td>
<td class="col-2">{{ item.bla3 }}</td>
<td class="col-2">{{ item.bla4 }}</td>
<td class="col-2">{{ item.bla5 }}</td>
<td class="col-1">{{ item.bla6 }}</td>
<td class="col-1">{{ item.bla7 }}</td>
<td class="col-3">{{ item.bla8 }}</td>
<td class="col-3">{{ item.bla9 }}</td>
<td class="col-1">{{ item.bla10 }}</td>
<td class="col-3">{{ item.bla11 }}</td>
<td class="col-3">{{ item.bla12 }}</td>
<td class="col-3">{{ item.bla13 }}</td>
<td class="col-3">{{ item.bla14 }}</td>
<td class="col-2">{{ item.bla15 }}</td>
</tr>
{% else %}
<tr>
<td colspan="14">no records found</td>
</tr>
{% endfor %}
</tbody>
</table>