在IE 11中翻译（转换）标题

Question

我有table，我想在css中使用header移动translate。我可以在Chrome中执行此操作，但不能在IE 11中执行此操作。

我尝试了以下内容，它在IE 11中移动，但问题是它没有占用整个可用宽度：https://jsfiddle.net/2mmm18ce/

我不能使用任何第三方库（例如jQuery）。

任何纯css解决方案？

Answer 1

您需要使用标题

的属性稍微玩一下

按如下方式添加显示和位置

table{
}
thead{
  display: table-caption;
  position: relative;
  transform: translate(0px, 30px);
}

<table>
<thead>
  <tr>
    <th>
      h1
    </th>
    <th>
      h2
    </th>
    <th>
      h3
    </th>
  </tr>
</thead>
<tbody>
  <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>  <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
    <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>  <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>  <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>  <tr>
  <td>
    v1
  </td>
  <td>
    v2
  </td>
  <td>
    v3
  </td>
  </tr>
</tbody>
</table>

Answer 2

翻译thead在IE或Edge中不起作用。改为翻译th。