1

I'm using Bootstrap 4 to achieve a flexible grid. I'm running into an issue in IE 11 where flexbox isn't responding appropriately to a simple grid like this:

<div class="container-fluid">
  <table class="table table-hover">
    <tr class="row">
      <td class="col-sm-2 red">16.67%</td>
      <td class="col-sm-2 blue">16.67%</td>
      <td class="col-sm-3 green">25%</td>
      <td class="col-sm-1 yellow">8.33%</td>
      <td class="col-sm-1 orange">8.33%</td>
      <td class="col-sm-3 purple">25%</td>
    </tr>
  </table>
</div>

Here is a Fiddle that works great in Chrome and Firefox. What can I do to remedy this in IE?

noclist
  • 1,659
  • 2
  • 25
  • 66
  • 2
    It's because you are using bootstrap classes inside a `table`, don't know why you would do that instead of using `divs` in this case... Any reason for the table particularly? – IvanS95 Dec 06 '18 at 15:39
  • 1
    Removing the table and using divs displays the row as intended: https://imgur.com/a/uD9G1uv – IvanS95 Dec 06 '18 at 15:40
  • @IvanS95 in my actual site, I am using this flexbox to display tabular data. Thus, using HTML tables. Why would this work in every browser besides IE? – noclist Dec 06 '18 at 15:44
  • 2
    there's some advice here about enabling flexbox properly for bootstrap4 - might be related: https://stackoverflow.com/a/25385798/1777072 – David Lavender Dec 06 '18 at 15:53
  • 1
    I imagine something to do with IE's html engine, the link above seems to be very helpful – IvanS95 Dec 06 '18 at 15:58

0 Answers0