I got this generated colspanish table scrolling inside a div on horizontal. Where the Auto 2 aggregated header column gets properly sized while Auto 1 doesn't. How do I force Auto 1 to look as Auto 2? Is this a html table bug?
Note that it looks the same with or without the Radzen css styles injected everywhere.
Thanks
<div style="width:100%; overflow:auto; border-color:red; border-style:dashed;">
<table style="width:1800px" border="1" class="rz-grid-table rz-grid-table-fixed rz-grid-table-striped rz-grid-table-composite rz-grid-gridlines-both">
<colgroup>
<col id="nG9cWC2czE0-col" style="width:100px;z-index:1">
<col id="nG9cWC2czE1-col" style="width:500px;z-index:1">
<col id="nG9cWC2czE2-col" style="width:80px">
<col id="nG9cWC2czE3-col" style="width:120px">
<col id="nG9cWC2czE4-col" style="width:100px">
<col id="nG9cWC2czE5-col" style="width:100px">
<col id="nG9cWC2czE6-col" style="width:100px">
<col id="nG9cWC2czE7-col" style="width:100px">
<col id="nG9cWC2czE8-col" style="width:300px">
<col id="nG9cWC2czE9-col" style="width:300px">
</colgroup><!--!-->
<thead>
<tr><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-frozen-cell rz-frozen-cell-left rz-text-align-center" scope="col" style="width:100px;text-align:center;;inset-inline-start:0;z-index:2"><div><span class="rz-column-title" title="Art."><span class="rz-column-title-content">Art.</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-frozen-cell rz-frozen-cell-left rz-frozen-cell-left-end rz-text-align-center" scope="col" style="width:500px;text-align:center;;inset-inline-start:100px;z-index:2"><div><span class="rz-column-title" title="Descrição dos Trabalhos"><span class="rz-column-title-content">Descrição dos Trabalhos</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:80px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Un"><span class="rz-column-title-content">Un</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:120px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="P.Un"><span class="rz-column-title-content">P.Un</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="P.Total"><span class="rz-column-title-content">P.Total</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Faturado"><span class="rz-column-title-content">Faturado</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Saldo"><span class="rz-column-title-content">Saldo</span></span></div></th><!--!-->
<th rowspan="1" colspan="3" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:300px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Auto 1"><span class="rz-column-title-content">Auto 1</span></span></div></th><!--!-->
<th rowspan="1" colspan="3" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:300px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Auto 2"><span class="rz-column-title-content">Auto 2</span></span></div></th>
</tr>
<tr><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Valor"><span class="rz-column-title-content">Valor</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="%"><span class="rz-column-title-content">%</span></span></div></th><!--!--><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Valor"><span class="rz-column-title-content">Valor</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="%"><span class="rz-column-title-content">%</span></span></div></th>
</tr>
</thead><!--!-->
<tbody>
<tr class=" rz-datatable-emptymessage-row"><td class="rz-datatable-emptymessage" colspan="14"><span style="white-space: normal">No items.</span></td></tr></tbody>
</table>
</div>Your col definitions are incorrect. Your table has 14 columns but only 10 <col> elements. Instead define all 14 columns
<div style="width:100%; overflow:auto; border-color:red; border-style:dashed;">
<table style="width:1800px" border="1" class="rz-grid-table rz-grid-table-fixed rz-grid-table-striped rz-grid-table-composite rz-grid-gridlines-both">
<colgroup>
<col id="nG9cWC2czE0-col" style="width:100px;z-index:1">
<col id="nG9cWC2czE1-col" style="width:500px;z-index:1">
<col id="nG9cWC2czE2-col" style="width:80px">
<col id="nG9cWC2czE3-col" style="width:120px">
<col id="nG9cWC2czE4-col" style="width:100px">
<col id="nG9cWC2czE5-col" style="width:100px">
<col id="nG9cWC2czE6-col" style="width:100px">
<col id="nG9cWC2czE7-col" style="width:100px">
<col id="nG9cWC2czE8-col" style="width:100px">
<col id="nG9cWC2czE9-col" style="width:100px">
<col id="nG9cWC2czEA-col" style="width:100px">
<col id="nG9cWC2czEB-col" style="width:100px">
<col id="nG9cWC2czEC-col" style="width:100px">
<col id="nG9cWC2czED-col" style="width:100px">
</colgroup><!--!-->
<thead>
<tr><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-frozen-cell rz-frozen-cell-left rz-text-align-center" scope="col" style="width:100px;text-align:center;;inset-inline-start:0;z-index:2"><div><span class="rz-column-title" title="Art."><span class="rz-column-title-content">Art.</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-frozen-cell rz-frozen-cell-left rz-frozen-cell-left-end rz-text-align-center" scope="col" style="width:500px;text-align:center;;inset-inline-start:100px;z-index:2"><div><span class="rz-column-title" title="Descrição dos Trabalhos"><span class="rz-column-title-content">Descrição dos Trabalhos</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:80px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Un"><span class="rz-column-title-content">Un</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:120px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="P.Un"><span class="rz-column-title-content">P.Un</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="P.Total"><span class="rz-column-title-content">P.Total</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Faturado"><span class="rz-column-title-content">Faturado</span></span></div></th><!--!-->
<th rowspan="2" colspan="1" class="rz-unselectable-text rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Saldo"><span class="rz-column-title-content">Saldo</span></span></div></th><!--!-->
<th rowspan="1" colspan="3" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:300px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Auto 1"><span class="rz-column-title-content">Auto 1</span></span></div></th><!--!-->
<th rowspan="1" colspan="3" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:300px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Auto 2"><span class="rz-column-title-content">Auto 2</span></span></div></th>
</tr>
<tr><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!--><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Valor"><span class="rz-column-title-content">Valor</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="%"><span class="rz-column-title-content">%</span></span></div></th><!--!--><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Qtd"><span class="rz-column-title-content">Qtd</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="Valor"><span class="rz-column-title-content">Valor</span></span></div></th><!--!-->
<th rowspan="1" colspan="1" class="rz-unselectable-text rz-composite-cell rz-text-align-center" scope="col" style="width:100px;text-align:center;;z-index:1"><div><span class="rz-column-title" title="%"><span class="rz-column-title-content">%</span></span></div></th>
</tr>
</thead><!--!-->
<tbody>
<tr class=" rz-datatable-emptymessage-row"><td class="rz-datatable-emptymessage" colspan="14"><span style="white-space: normal">No items.</span></td></tr></tbody>
</table>
</div>