Set forced width with css on which is under with colspan without using colgroup

Question

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

.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% This columns has a lot of content and a really long woooooooooooooooooooooooooooooooooooooord which is not wrapable by the browser by default. This column still should be 30%with.</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 the table-layout: fixed; since I need the columns to be exactly as width as specified. Using table-layoud: auto; results in the browser taking the specified width as on orientation but still dynamically adjusting width if table content exceeds the available width.
• colgroup and col can not be used since I'm using a wysiwyg editor which is not adding colgroups. Thus I rely on css.

This is a follow up question, since new conditions came up during my initial question Set width on <td> which under <th> with colspan