Разделить таблицу на столбцы CSS, проблема в Firefox - PullRequest
Новая
       32

Разделить таблицу на столбцы CSS, проблема в Firefox

0 голосов
/ 20 февраля 2019

У меня есть таблица, которая должна быть разделена на два столбца (столбцы макета, а не столбцы таблицы).

Отлично работает во всех основных браузерах, кроме Firefox, который не разбивает таблицу на два столбца. 

.column-layout {
  columns: 2;
}
<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

Вы можете «запустить фрагмент» в Chrome, чтобы посмотреть, как он должен выглядеть.Firefox отображает таблицу в одну строку.

Причина этого: существуют несколько длинных таблиц, которые должны быть разделены на две колонки в режиме просмотра.

Есть ли обходной путь, чтобы научить Firefox разбивать таблицы на несколько столбцов?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Для Firefox вам также нужно , чтобы разбить отображение макета таблицы , но тогда это уже не поведение, подобное table, столбцы и строки больше не будут совпадать и сейчасиспользовать rowspan, ни colspan.

проще всего сбросить элемент таблицы в display:block;. (подумайте о tbody, который генерируется браузером, даже если отсутствует в коде HTML) . 

.column-layout {
  columns: 2;
}


/* reset table-layout behavior of HTML table to allow here column-layout but loose the table-layout*/

.column-layout table,
.column-layout tbody,/* don't forget me, i'll be there */
.column-layout tr {
  display: block;
}
<div class="column-layout">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

ручка для игры с

0 голосов
/ 20 февраля 2019

В этом свойстве было много проблем почти с каждым браузером, как вы можете видеть здесь .

Я попробовал флаг -moz, найденный здесь для этого свойства иэто не сработало, поэтому я не верю, что в настоящее время существует решение этой проблемы.Чтобы убедиться, что это работает для всех пользователей, я бы использовал свойство столбцов таблицы или что-то вроде CSS Grid.

...