Me gustaría establecer el ancho entd entbody que está debajothead th que tiene uncolspan="2" con un ancho de columna definido en%. El shell del navegador no ajusta dinámicamente el ancho de la tabla si el contenido de la celda excede con.

.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>

El estilo anterior funciona sithead se elimina pero no funciona con él.

Notas importantes,

Agregué eltable-layout: fixed; ya que necesito que las columnas tengan exactamente el ancho que se especifica. Utilizandotable-layoud: auto; da como resultado que el navegador tome el ancho especificado como en la orientación, pero aún así ajuste dinámicamente el ancho si el contenido de la tabla excede el ancho disponible.colgroup ycol no se puede usar ya que estoy usando un editor wysiwyg que no agrega grupos de colores. Por lo tanto, confío en css.

Esta es una pregunta de seguimiento, ya que surgieron nuevas condiciones durante mi pregunta inicialEstablezca el ancho en <td> que debajo de <th> con colspan