Question

任何人都有一个解决方案似乎是Safari的bug？当变换CSS应用于表格内容时，标题会跳转到表格的末尾。

有一个提示使用＆＃34;将改变：转换＆＃34;对于similar case的标题，但不幸的是它在这里不起作用。

见codepen：

HTML：

<table>
<caption>
  Caption
</caption>
  <thead>
    <tr>
      <th></th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="collapse(this)">
      <td></td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

CSS

tbody tr > td:first-child:before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid black;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
  pointer-events:auto;
}
tbody tr.collapsed > td:first-child:before {
  content: ' ';
  transform: rotate(90deg) translateX(-3px);
}

JS：

function collapse(e) {
  e.classList.toggle("collapsed");
}

Answer 1

我在iOS Safari中遇到了caption-side: top;的类似问题。

尝试添加以下CSS：

caption {
    display: block;
}

Answer 2

我不敢相信现在还没有解决。

在jQuery中，我所做的是分离标题，然后重新附加：

$('table').prepend($('caption').detach());

跳跃Safari表格标题的解决方案？

2 个答案: