在 IE11 的表格中使用 flexbox 元素答案

【问题标题】：Using flexbox elements within a table in IE11在 IE11 的表格中使用 flexbox 元素
【发布时间】：2020-06-28 02:57:15
【问题描述】：

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

如何为 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>

【问题讨论】：

注意：<link> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。
查看 caniuse.com 了解 flexbox，IE10 和 IE11 对 flexbox 的支持有限。对于 IE11，请参阅此处的规范：w3.org/TR/css-flexbox-1。在此处查看此 SO 帖子：stackoverflow.com/questions/37069218/… 您可能会考虑使用 display: table 作为后备。
![limited support for flex in IE11 due to large number of bugs](i.stack.imgur.com/ykCMF.png) 我建议您使用网格、内联网格或者可能在 flex 布局之前使用的技术。这很乏味，但对于开发人员来说是一生一次的经历。

标签： css flexbox internet-explorer-11 bulma

【解决方案1】：

尝试设置表格单元格中列的大小。

请将您的代码修改如下（列添加is-one-quarter，列添加is-6）：

<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>

输出如下：

有关 Bulma 列大小的更多详细信息，请查看this link。

【讨论】：