Set width on <td> which is under <th> with colspan

I'd like to set the width on the td in tbody which is underneath thead that has colspan="2" with a hard defined column width in %. The browser shall not dynamically adjust the table width.

.sample {
  width: 100%;
  table-layout: fixed;
}

.sample td:nth-child(1),
.sample th:nth-child(1) {
  width: 30%;
}

.sample td:nth-child(2),
.sample th:nth-child(2) {
  width: 70%;
}

<table class="sample" border="1">
  <thead>
    <tr>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>30%</td>
      <td>70%</td>
    </tr>
  </tbody>
</table>

The above style works if thead is removed but does not work with it.

Important notes:

• I added table-layout: fixed; since I need the columns to be exactly as wide as specified. Using table-layout: auto; results in the browser taking the specified width as on orientation but still dynamically adjusts width.

EDIT

The accepted answer solved my question above. However I'm not able to use colgroup since I'm using a WYSIWYG editor. Thus I added a follow up question with detailed specifications here.

Try using <colgroup> and <col> tags:

.sample {
  width: 100%;
  table-layout: fixed;
}

<table class="sample" border="1">
  <colgroup>
    <col style="width:30%;">
    <col style="width:70%;">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>30%</td>
      <td>70%</td>
    </tr>
  </tbody>
</table>