Problem aligning the columns of the head of a table with the body

Question

I am using a datatable and I have problems aligning the columns of the table header with the data shown in thebody.

The code is the following:

<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
    <thead>
        <TR class="texto">                          
            <TH align="center" colspan="8" width="60%">&nbsp;</TH>
            <TH align="center" colspan="2" width="5%">1° Pregrabado</TH>
            <TH align="center" colspan="2">Ultimo Pregrabado</TH>
            <TH align="center" colspan="2">Envío a Despacho</TH>
            <TH align="center" colspan="2">Devolución Juez</TH> 
            <TH align="center" colspan="2">Desp x Devol a Juez</TH> 
            <TH align="center" width="5%" >Cantidad de </TH>    
            <TH align="center" colspan="2">Resolución</TH>  
        </TR>
        <TR class="texto">                          
            <TH align="center" width="10%">Rit</TH>
            <TH align="center" width="10%">Nombre Funcionario</TH>
            <TH align="center" width="10%">Nombre Juez</TH>
            <TH align="center" width="5%">Tramite</TH>
            <TH align="center" width="5%">Invalidado</TH>
            <TH align="center" width="5%">Doc. Res</TH>
            <TH align="center" width="5%">Doc. Esc</TH>
            <TH align="center" width="5%">Días</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>    
            <TH align="center" width="5%">HH:MM</TH>    
            <TH align="center" width="5%">Fecha</TH>    
            <TH align="center" width="5%">HH:MM</TH>    
            <TH align="center" width="5%">Escritos Resolución</TH>  
            <TH align="center" width="5%">Fecha Firma</TH>  
            <TH align="center" width="5%">HH:MM</TH>    
        </TR>
    </thead>
    <tbody>
        <c:forEach items="${lstdatos}" var="fun"> 
            <TR class="texto">
                <TD width="10%" align="center"><c:out value="${fun.rit}"                /></TD>
                <TD width="10%" align="center"><c:out value="${fun.nombres}"            /></TD>
                <TD width="10%" align="center"><c:out value="${fun.gls_juez}"           /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.gls_tramite}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.estado}"             /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.doc_resolucion}"     /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.doc_escrito}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.dias}"               /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_1erPreg}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_1erPreg}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_ultPreg}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_ultPreg}"        /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_despacho}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_despacho}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_devuelto}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_devuelto}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_desxdevjuez}"    /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_desxdevjuez}"    /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.can_escritos}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_firmaRes}"       /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_resolucion}"     /></TD>
                <script>
                    FLG_datos=1;
                    ind++;
                </script>
            </TR>
        </c:forEach>
    </tbody>
</table>

And the view I have of the table is the following:

What can I do to align the columns of the header and thebody?
I tried using width but no results.

Look at [table.columns.adjust().draw()](https://datatables.net/reference/api/columns.adjust()) — davidkonrad, Sep 29 '18 at 13:49
Possible duplicate of [datatable jquery - table header width not aligned with body width](https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width) or [dataTable Headers Misaligned](https://stackoverflow.com/questions/42007033/datatable-headers-misaligned) — davidkonrad, Sep 29 '18 at 13:50

score 0 · Answer 1 · answered Sep 28 '18 at 04:57

<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
    <thead>
        <TR class="texto">                          
            <TH align="center" colspan="2" width="60%">&nbsp;</TH>
            <TH align="center" colspan="2" width="5%">1° Pregrabado</TH>
            <TH align="center" colspan="2">Ultimo Pregrabado</TH>
            <TH align="center" colspan="2">Envío a Despacho</TH>
            <TH align="center" colspan="2">Devolución Juez</TH> 
            <TH align="center" colspan="2">Desp x Devol a Juez</TH> 
            <TH align="center" width="5%" >Cantidad de </TH>    
            <TH align="center" colspan="2">Resolución</TH>  
        </TR>
        <TR class="texto">                          
            <TH align="center" width="10%">Rit</TH>
            <TH align="center" width="10%">Nombre Funcionario</TH>
            <TH align="center" width="10%">Nombre Juez</TH>
            <TH align="center" width="5%">Tramite</TH>
            <TH align="center" width="5%">Invalidado</TH>
            <TH align="center" width="5%">Doc. Res</TH>
            <TH align="center" width="5%">Doc. Esc</TH>
            <TH align="center" width="5%">Días</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>
            <TH align="center" width="5%">HH:MM</TH>
            <TH align="center" width="5%">Fecha</TH>    
            <TH align="center" width="5%">HH:MM</TH>    
            <TH align="center" width="5%">Fecha</TH>    
            <TH align="center" width="5%">HH:MM</TH>    
            <TH align="center" width="5%">Escritos Resolución</TH>  
            <TH align="center" width="5%">Fecha Firma</TH>  
            <TH align="center" width="5%">HH:MM</TH>    
        </TR>
    </thead>
    <tbody>
        <c:forEach items="${lstdatos}" var="fun"> 
            <TR class="texto">
                <TD width="10%" align="center"><c:out value="${fun.rit}"/></TD>
                <TD width="10%" align="center"><c:out value="${fun.nombres}"/></TD>
                <TD width="10%" align="center"><c:out value="${fun.gls_juez}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.gls_tramite}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.estado}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.doc_resolucion"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.doc_escrito}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.dias}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_1erPreg}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_1erPreg}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_ultPreg}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_ultPreg}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_despacho}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_despacho}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_devuelto}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_devuelto}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_desxdevjuez}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_desxdevjuez}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.can_escritos}" /></TD>
                <TD width="5%"  align="center"><c:out value="${fun.fec_firmaRes}"/></TD>
                <TD width="5%"  align="center"><c:out value="${fun.hor_resolucion}" /></TD>
                <script>
                    FLG_datos=1;
                    ind++;
                </script>
            </TR>
        </c:forEach>
    </tbody>
</table>

doesn't seems to work for me can you please explain what you have changed in code? it's looks like you just copy pasted same code in code snippet? https://stackoverflow.com/help/how-to-answer — Vikas Jadhav, Sep 28 '18 at 05:01

Problem aligning the columns of the head of a table with the body

1 Answers1