Using flexbox elements within a table in IE11

Question

I have a table with a row that needs to show data with nested rows. To make sure the data for "Attendee Name, Title" and "Attendee Company, Org., or other" are vertically spacing the content correctly and showing the data on the correct row, I am attempting to use Flexbox. This works well in Chrome but in IE, the two flexbox columns are overlapping.

How can I correct this for IE11?

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet"/>
<section class="section">
  <div class="container">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>Transaction Date</th>
          <th>Merchant Name</th>
          <th>Transaction Amount</th>
          <th>Expense Type</th>
          <th>Expense Category</th>
          <th>Business Purpose</th>
          <th>
            <div class="columns">
              <div class="column">
                Attendee Name, Title
              </div>
              <div class="column">
                Attendee Company, Org., or other
              </div>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12/15/2019</td>
          <td>Apple</td>
          <td>14.97</td>
          <td>Business Travel</td>
          <td>Single Day Mean/Incidental</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns">
              <div class="column">
                John Doe, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
            <div class="columns">
              <div class="column">
                Jane Smith, Analyst
              </div>
              <div class="column">
                Some Company
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>12/18/2019</td>
          <td>Nike</td>
          <td>9.96</td>
          <td>Business Travel</td>
          <td>Airline Ticket</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns">
              <div class="column">
                Jane Doe, Analyst
              </div>
              <div class="column">
                Another Company
              </div>
            </div>
            <div class="columns">
              <div class="column">
                John Smith, Analyst
              </div>
              <div class="column">
                Another Company
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Mar 17 '20 at 02:22
See caniuse.com for flexbox, IE10 and IE11 have limited flexbox support. For IE11 see the spec here: https://www.w3.org/TR/css-flexbox-1/. See this SO post here: https://stackoverflow.com/questions/37069218/flexbox-fallback-to-display-table-in-older-browsers you might consider using display: table as a fallback. — Nathaniel Flick, Mar 17 '20 at 02:25
[![limited support for flex in IE11 due to large number of bugs](https://i.stack.imgur.com/ykCMF.png)](https://i.stack.imgur.com/ykCMF.png) I would suggest you to use grid, inline-grid or maybe techniques used before flex layout. this is tedious but a once in a lifetime experience for a developer. — Anant Vikram Singh, Mar 17 '20 at 02:30

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Try to set the size of the column in the table cells.

Please modify your code as below (add is-one-quarter for columns and add is-6 for column):

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet"/>
<section class="section">
  <div class="container">
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>Transaction Date</th>
          <th>Merchant Name</th>
          <th>Transaction Amount</th>
          <th>Expense Type</th>
          <th>Expense Category</th>
          <th>Business Purpose</th>
          <th>
            <div class="columns is-one-quarter">
              <div class="column is-6">
                Attendee Name, Title
              </div>
              <div class="column is-6">
                Attendee Company, Org., or other
              </div>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12/15/2019</td>
          <td>Apple</td>
          <td>14.97</td>
          <td>Business Travel</td>
          <td>Single Day Mean/Incidental</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns is-one-quarter">
              <div class="column is-6">
                John Doe, Analyst
              </div>
              <div class="column is-6">
                Some Company
              </div>
            </div>
            <div class="columns is-one-quarter">
              <div class="column is-6">
                Jane Smith, Analyst
              </div>
              <div class="column is-6">
                Some Company
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>12/18/2019</td>
          <td>Nike</td>
          <td>9.96</td>
          <td>Business Travel</td>
          <td>Airline Ticket</td>
          <td>A really long paragraph could be here to show Business Purpose.</td>
          <td>
            <div class="columns is-one-quarter">
              <div class="column is-6">
                Jane Doe, Analyst
              </div>
              <div class="column is-6">
                Another Company
              </div>
            </div>
            <div class="columns is-one-quarter">
              <div class="column is-6">
                John Smith, Analyst
              </div>
              <div class="column is-6">
                Another Company
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

The output as below:

More detail information about the Bulma Column sizes, please check this link.

Using flexbox elements within a table in IE11

1 Answers1