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/[email protected]/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>

Answer 1

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/[email protected]/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.