HTML-таблица: процентная ширина колонок

У меня есть таблица с 7 колонками, и я хочу, чтобы ширина колонок была следующей:

• 3 колонки по width=20%
• 4 колонки по width=10%

Я создал 2 CSS класса, по одному для каждой ширины, и назначаю их каждой ячейке.

Однако у меня есть проблема: ширина колонок всегда подстраивается под содержимое. Если я вставляю одну букву, ширина становится очень маленькой, а если длинную строку — то слишком большой. Я хочу, чтобы ширина была фиксированной.

Вот пример моего CSS и HTML:

table {
  width: 100%;
}
.ten {
  width: 10%;
}
.twenty {
  width: 20%;
}

<table>
  <tr>
    <th class="ten">H1</th>
    <th class="ten">H2</th>
    <th class="ten">H3</th>
    <th class="twenty">H4</th>
    <th class="twenty">H5</th>
    <th class="twenty">H6</th>
    <th class="ten">H7</th>
  </tr>

  <tr>
    <td class="ten">A1</td>
    <td class="ten">A2</td>
    <td class="ten">A3</td>
    <td class="twenty">A4</td>
    <td class="twenty">A5</td>
    <td class="twenty">A6</td>
    <td class="ten">A7</td>
  </tr>

  <tr>
    <td class="ten">B1</td>
    <td class="ten">B2</td>
    <td class="ten">B3</td>
    <td class="twenty">B4</td>
    <td class="twenty">B5</td>
    <td class="twenty">B6</td>
    <td class="ten">B7</td>
  </tr>
</table>

Не могли бы вы объяснить, как я могу достичь желаемого результата?