tableをきちんとした比率で表現したい

Question

いつもお世話になっております。
htmlで画像のような比率のtableを表現したいと思っています。

いくらやっても、きれいな比率のテーブルになってくれません。
どうすれば、きれいな比率のテーブルになるでしょうか？
作ったところまで、載せておきます。
よろしくお願いいたします。

<table>
    <thead>
        <tr class="table--minute__ttl">
            <th rowspan="2" class="table__ttl--1">3</th>
            <th colspan="2" class="table__ttl--2">7</th>
        </tr>
        <tr class="table__ttl--sub">
            <th class="table__ttl--sub--1">1</th>
            <th class="table__ttl--sub--2">1</th>
        </tr>
    </thead>
</table>

.table {
    &__ttl {
        &--1 {
            width: 30%;
        }

        &--2 {
            width: 70%;
        }

        &--sub {
            width: 100%;

            &--1,
            &--2 {
                width: 50%;
            }
        }
    }
}

Comments

[m.ts10806]

コンパイル後のCSSをご提示ください

Answer 1

自己解決しました。

&--sub {
   width: 100%;

   &--1,
   &--2 {
      width: calc((100% - 30%)/2);
   }
}