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

Question

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

.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 要么折叠它们(如果容器是 block 状的)，要么将它们展开成水平的(如果容器是内联的)。

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

我尝试将表格重新实现为 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