I've encountered a strange issue when trying to wrap an HTML table inside a collapsing div element using Bootstrap. The last column is not consistently displayed in Chrome (44.0.2403.107 m) depending on the window width, but it works fine in Firefox.
If you want to see the problem for yourself, check out this fiddle --> https://jsfiddle.net/mattbt/5k7ym9qp/
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<table class="table table-bordered table-hover" style="background-color: white;">
<thead>
<tr class="info">
<th>header</th>
<th style="width:30px;">header</th>
<th>header</th>
<th style="width:75px;">header header</th>
<th>header header</th>
<th>header header</th>
<th>last col</th>
</tr>
</thead>
<tbody id="tbody-1">
<tr id="rowscen-1">
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada. Integer id lorem ultrices, eleifend ex ut, dignissim lorem. Nunc commodo tincidunt euismod. Cras at dui libero. Sed viverra neque in risus maximus facilisis. Phasellus nulla nisi, pretium vitae vulputate at, ornare in arcu. Praesent mi nulla, tincidunt sed lacinia eget, molestie ut elit. Aliquam nec tristique est.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
<td class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
<td>Lorem ipsum dolor sit amet</td>
<td>Last Column text</td>
</tr>
</tbody>
</table>
</div>
</div>
Resize your browser window to see the last column mysteriously disappear and reappear.
It might just be a small issue, but I could really use some help. Thank you!