解决Safari表colspan /写入模式宽度错误

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要么折叠它们(如果容器是块),要么将它们展开,就像它们是水平的一样(如果容器是内联的).

我已经将错误提交给了Webkit,但在那之前,我想使用这种模式,所以我正在寻找一种方法来保留这种结构的大部分并且能够在垂直文本之上使用colspan.实际的用例更复杂,因此简单地在某处设置固定宽度并不是一个可行的解决方案.

我尝试重新实现表格display: flex并在行方向flex中嵌套列,但遇到了同样的错误,这次也是在Firefox中.

Answer 1

使用 jQuery 进行简单修复（如果需要，您可以使用纯 js，我认为您也可以使用 css（sass/less）来完成，但这是我的解决方案。

首先我检查 userAgent，如果是 Firefox，则将显示设置为inline-blockfordiv和a。否则就使用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没有得到很好的支持...嗯嗯嗯，我想现在尽量避免它

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