解决 Safari table colspan/writing-mode 宽度错误

Question

我希望 table 的第一个单元格横跨多个单元格，下面的单元格具有垂直文本，如下例所示。

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

在除 Safari 之外的所有浏览器中，这都会生成包含横向文本的适当大小的单元格。 Safari 要么折叠它们（如果容器是块状的），要么将它们展开成水平的（如果容器是内联的）。

我已经提交了 bug to Webkit，但在那之前，我想使用这个模式，所以我正在寻找一种绕过它的方法来保留大部分结构和使用能力垂直文本上方的 colspan。实际用例更复杂，所以简单地在某处设置固定宽度不是可行的解决方案。

我尝试将 table 重新实现为 display: flex 并在 row-direction flex 中嵌套列，但遇到了同样的错误，这次也是在 Firefox 中。

Answer 1

使用 jQuery 进行简单修复（如果你愿意，你可以使用纯 js，我想你也可以使用 css (sass/less) 但这是我的解决方案.

首先我检查 userAgent，如果它是 Firefox，则将 div 和 a 的显示设置为 inline-block。否则就用 flex.

对于每个 td div 和 td a 获取子 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>

似乎 vertical-rl 没有得到很好的支持... hummmmm 我想现在尽量避免它

https://www.w3.org/International/tests/repo/results/writing-mode-vertical

Answer 2

本质上，vertical-rl 文本只是 vertical-lr 文本绕其轴旋转 180 度。

这可以通过以下两种方式之一实现：

1. 使用以下方法旋转文本：

transform: rotate(180deg)

2. 旋转 180 度相当于在 X、Y 轴上翻转文本

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>