Work around Safari table colspan/writing-mode width bug

Question

I'd like a table to have a first cell which colspans several cells and the ones beneath to have vertical text, like the following example.

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

In every browser except Safari, this produces properly-sized cells containing sideways text. Safari either collapses them (if the container is block) or expands them as if they were horizontal (if the container is inline).

I've submitted the bug to Webkit, but until then, I'd like to use this pattern, so I'm looking for a way around it that preserves most of this structure and the ability to use colspan above vertical text. The actual use case is more complex, so simply setting fixed widths somewhere is not a viable solution.

I attempted reimplementing the table as display: flex and nesting column within row-direction flex, but encountered the same bug, this time in Firefox as well.

Answer 1

Essentially, vertical-rl text is just vertical-lr text that is rotated 180 degrees around it's axis.

That can be achieved in 1 of 2 ways:

1. rotate the text using:

transform: rotate(180deg)

2. a 180 deg rotation is equivalent the flipping the text over both X,Y axes

transform: scale(-1,-1)

.rl1 {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.rl2 {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

.lr {
  writing-mode: vertical-lr;
}


/* JUST STYLING BELOW */

.styleContainer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: Arial;
  font-size: 40px;
  height: 100vh;
}

.styleContainer .rl1,
.rl2 {
  color: green
}

.styleContainer .lr {
  color: red
}

<div class="styleContainer">
  <div class="rl1">
    solution1
  </div>
  <div class="rl2">
    solution2
  </div>
  <div class="lr">
    vertical-lr
  </div>
</div>