неверный рендеринг таблицы в FireFox

Question

Форматирование таблицы нарушается при обновлении страницы, но работает нормально при ее изменении.

Я пытался запустить один и тот же кусок кода в Chrome, IE и Edge, без каких-либо проблем такого рода..

SASS, который обрабатывает форматирование таблицы, представляет собой следующий фрагмент:

.cv-table {
  border-collapse: separate;
  border-spacing: 0 $line-spacing;
}

.cv-section-cell {
  text-align: center;
  vertical-align: middle;

  border-right: thin solid #000;
  padding: $line-spacing / 2;

  margin: 0;

  span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

Сама таблица выглядит так:

<table class="cv-table">
  <tr>
    <td rowspan="2" class="cv-section-cell">
      <span>
        Experience
      </span>
    </td>
    <td class="cv-section-cell">
      <span>
        2016/2017
      </span>
    </td>
    <td class="cv-content-cell">
      Some other text.
    </td>
  </tr>
  <tr>
    <td class="cv-section-cell">
      <span>
        2017/2018
      </span>
    </td>
    <td class="cv-content-cell">
      Some text.
    </td>
  </tr>
</table>

Так выглядит страницадо перезагрузки:

И вот как это выглядит после:

Answer 1

дают некоторую ширину и высоту td

добавьте этот класс в ваш класс, может, он работает для вас

 .cv-section-cell {
          width: 1.5em;
          height: 1.5em;
       }

открыть эту скрипку в Firefox https://jsfiddle.net/fwz7k20q/4/