Html table with header colpans doesn't render as expected

lnaie
August 31, 2024
201 views
0 votes
2 Answers

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>

Answers

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>

after adding 2 more col tag with 100px width then it fit with 14 column else you can remove all colgroup it will automatically fit.

<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="nG9cWC2czE9-col" style="width: 300px" />
            <col id="nG9cWC2czE9-col" style="width: 300px" />
        </colgroup>

Please signup or login to give your own answer.

Click here to cancel reply.