Doubt table header

Question

I’m trying to get a tag th has two lines and the first line occupies the width the whole of the parent tag, and that the second row be divided into 4 columns. However I could not reach this result using the tag th tagged tr and td Inside, the closest I could get was using Divs. my doubt would be possible to get this result with the tags used in tables. (td, tr, th)

.header {
      background: #c3ac6c;
      text-align: center;
    }
    
th{
  border: 1px solid black;
  overflow: hidden;
}

<table>
<tr class="header" border="1">

    <th>CNPJ</th> 
    <th>CLIENTE</th>
    <th>AGÊNCIA</th>
    
    <th>
      <div>
        <div>COBRANÇA</div>
      </div>
    <div style="display: flex; justify-content: space-between" > 
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    </th>

  

    <th>
        <div>
          <div>VOL MM</div>
        </div>
      <div style="display: flex; justify-content: space-between"> 
        <div class="border">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </th>


  </tr>
</table>

Answer 1

Dude you have to cuddle tabels, one table inside another... in my view is the simplest way to do, and it was already a technique that was widely used at the time that was still being done layout with table...

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header {
  background: #c3ac6c;
  text-align: center;
}

<table>
  <tbody>
    <tr class="header">
      <th>CNPJ</th>
      <th>CLIENTE</th>
      <th>AGÊNCIA</th>
      <th>
        <table>
          <tbody>
            <tr>
              <td colspan="4">COBRANÇA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
            </tr>
          </tbody>
        </table>
      </th>
      <th>
        <table>
          <tbody>
            <tr>
              <td colspan="4">VOL MM</td>
            </tr>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
      <td>item</td>
    </tr>
  </tbody>
</table>