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>