Использование элементов flexbox в таблице в IE11 - PullRequest
Новая
       82

Использование элементов flexbox в таблице в IE11

0 голосов
/ 17 марта 2020

У меня есть таблица со строкой, которая должна показывать данные с вложенными строками. Чтобы убедиться, что данные для «Имя, должность посетителя» и «Компания посетителя, организация или другое» правильно размещают содержимое по вертикали и отображают данные в правильной строке, я пытаюсь использовать 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>

1 Ответ

0 голосов
/ 17 марта 2020

Попробуйте установить размер столбца в ячейках таблицы.

Пожалуйста, измените ваш код, как показано ниже (добавьте 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>

Вывод, как показано ниже:

image

Более подробную информацию о размерах колонны Бульма, пожалуйста, проверьте эту ссылку .

...