Работа над ошибкой ширины таблицы столбец Safari/записи

Я хотел бы, чтобы в таблице была первая ячейка, которая объединяет несколько ячеек и те, которые имеют вертикальный текст, например, следующий пример.

.second td * {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
<table border=1><tr>
<td colspan=4>This cell has colspan=4</td>
</tr><tr class="second">
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
<td><div>Writing-mode:vertical-rl inside block</div></td>
</tr></table>

<table border=1><tr>
<td colspan=4>This cell has colspan=4</td>
</tr><tr class="second">
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
</tr></table>

Ответы

Ответ 1

Простое исправление с jQuery (вы можете использовать чистые js, если хотите, я думаю, вы также можете сделать это с помощью css (sass/less), но это решение, которое у меня есть.

Сначала я проверяю userAgent, если это отображение Firefox установлено на inline-block для div и a. Просто используйте flex.

Для каждой td div и td a получить ширину child div или a и назначить ширине родительского td

var display = 'flex';

if (navigator.userAgent.search("Firefox") > -1) {
  display = 'inline-block';
}

$("td div, td a").each(function() {
  self = $(this);
  self.css('display', display);
  self.closest('td').width(self.width());
});
.second td * {
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border=1>
  <tr>
    <td colspan=4>This cell has colspan=4</td>
  </tr>
  <tr class="second">
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
    <td>
      <div>Writing-mode:vertical-rl inside block</div>
    </td>
  </tr>
</table>

<table border=1>
  <tr>
    <td colspan=4>This cell has colspan=4</td>
  </tr>
  <tr class="second">
    <td id="thistd"><a id="this">Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
    <td><a>Writing-mode:vertical-rl inside inline</a></td>
  </tr>
</table>