在IE11中的表中使用flexbox元素

Question

我有一个表，其中的一行需要显示带有嵌套行的数据。为确保“参加者姓名，职务”和“参加者公司，组织或其他”的数据在垂直方向上正确隔开内容，并在正确的行上显示数据，我尝试使用Flexbox。在Chrome中效果很好，但在IE中，两个flexbox列是重叠的。

我该如何针对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

我建议您使用网格，内联网格或在弹性布局之前使用的技术。

这很乏味，但对开发人员来说是一生一次的经历。