1

Estou tentando fazer com que uma tag th tenha duas linhas e que a primeira linha ocupe o width todo da tag pai, e que a segunda linha seja dividida em 4 colunas. Porem não consegui chegar nesse resultado utilizando a tag th com tags tr e td dentro, o mais proximo que consegui foi utilizando divs. minha dúvida seria é possivel chegar nesse resultado com as tags utilizadas em tabelas. (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>

1 Resposta 1

3

Cara vc tem que aninhar tabels, uma table dentro de outra... ao meu ver é a forma mais simples de fazer, e já foi uma técnica muito usada na época que ainda se fazia layout com table...

inserir a descrição da imagem aqui

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>

2
  • 1
    Perfeito, funcionou aqui obrigado :) 18/06/2019 às 16:36
  • @OtavioCapel legal que deu certo ai, essa eh uma técnica bem antiga rss
    – hugocsl
    18/06/2019 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .