vueのテーブル入れ子がIEで出ないのの解決

要約

• templateは使えない
  • tbodyなら代用できる
• tableの直の子要素の幅の制御が特殊？
  • tbodyの繰り返しをするときは、繰り返さない行もtbodyに入れる

<script type="text/javascript" src="vue.js"></script>
<style>
  table,
  tr,
  td,
  th {
    border: solid black 1px;
    border-collapse: collapse;
  }
</style>
<div id="app">
<!-- NG

IEで template タグはレンダされない
  <table>
    <tr>
      <td>col1</td>
      <td>col2</td>
    </tr>
    <template v-for="item in group">
      <tr>
        <td colspan="2">{{item.lab}}</td>
      </tr>
      <tr v-for="r in item.contents">
        <td>{{r.v1}}</td>
        <td>{{r.v2}}</td>
      </tr>
    </template>
  </table>

IE で 1行目(ヘッダ行)の1列目の幅と2行目以降の2列分の幅が同じになってしまう。
  <table>
    <tr>
      <td>col1</td>
      <td>col2</td>
    </tr>
    <tbody v-for="item in group">
      <tr>
        <td colspan="2">{{item.lab}}</td>
      </tr>
      <tr v-for="r in item.contents">
        <td>{{r.v1}}</td>
        <td>{{r.v2}}</td>
      </tr>
    </tbody>
  </table>
-->

  <table>
    <tbody>
      <tr>
        <td>col1</td>
        <td>col2</td>
      </tr>
    </tbody>
    <tbody v-for="(item,i) in group">
      <tr>
        <td colspan="2">{{item.lab}}</td>
      </tr>
      <tr v-for="(r,j) in item.contents" :key="'j'+j">
        <td>{{r.v1}}</td>
        <td>{{r.v2}}</td>
      </tr>
    </tbody>
  </table>

</div>

<script>
  app = new Vue({
    el: "#app",
    data: {
      group: [
        {
          lab: "lab1",
          contents: [
            { v1: "1-1-v1", v2: "1-1-v2" },
            { v1: "1-2-v1", v2: "1-2-v2" },
          ],
        },
        {
          lab: "lab2",
          contents: [
            { v1: "2-1-v1", v2: "2-1-v2" },
            { v1: "2-2-v1", v2: "2-2-v2" },
            { v1: "2-3-v1", v2: "2-3-v2" },
          ],
        },
      ],
    },
  });
</script>

捨てよう、IE