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

Question

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

Navigation

#1 by (0 votes)

0

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

The code is as follows:

<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 as follows:

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

html css datatable

asked by Henry Avery 28.09.2018 в 04:44

source

1 answer

Python error not enough values to unpack (expected 3, got 2) How a 2D Array works with a double pointer in C

score 0 · Answer 1

Create a style sheet, apparently the error you have is in your .css

The code you use, without the programming part, is:

        <!DOCTYPE HTML>
        <html>
        <head>
        <style type="text/css">
          body {
            margin: 0;
            width: 900px;
            font-size: 5sp;
            }

          </style>

        </head>
        <body width="900px">
        <table border="1px">
            <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>
                    <TR class="texto">
                        <TD width="10%" align="center"> value="${fun.rit}</TD>
                        <TD width="10%" align="center"> value="${fun.nombres}"        </TD>
                        <TD width="10%" align="center"> value="${fun.gls_juez}"       </TD>
                        <TD width="5%"  align="center"> value="${fun.gls_tramite}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.estado}"         </TD>
                        <TD width="5%"  align="center"> value="${fun.doc_resolucion}" </TD>
                        <TD width="5%"  align="center"> value="${fun.doc_escrito}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.dias}"           </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_1erPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_1erPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_ultPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_ultPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_despacho}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_despacho}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_devuelto}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_devuelto}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_desxdevjuez}"</TD>
                        <TD width="5%"  align="center"> value="${fun.hor_desxdevjuez}"</TD>
                        <TD width="5%"  align="center"> value="${fun.can_escritos}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_firmaRes}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_resolucion}" </TD>
                        <script>
                        </script>
                    </TR>
                    <TR class="texto">
                        <TD width="10%" align="center"> value="${fun.rit}</TD>
                        <TD width="10%" align="center"> value="${fun.nombres}"        </TD>
                        <TD width="10%" align="center"> value="${fun.gls_juez}"       </TD>
                        <TD width="5%"  align="center"> value="${fun.gls_tramite}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.estado}"         </TD>
                        <TD width="5%"  align="center"> value="${fun.doc_resolucion}" </TD>
                        <TD width="5%"  align="center"> value="${fun.doc_escrito}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.dias}"           </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_1erPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_1erPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_ultPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_ultPreg}"    </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_despacho}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_despacho}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_devuelto}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_devuelto}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_desxdevjuez}"</TD>
                        <TD width="5%"  align="center"> value="${fun.hor_desxdevjuez}"</TD>
                        <TD width="5%"  align="center"> value="${fun.can_escritos}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.fec_firmaRes}"   </TD>
                        <TD width="5%"  align="center"> value="${fun.hor_resolucion}" </TD>
                        <script>
                        </script>
                    </TR>
            </tbody>
        </table>
        </body>
        </html>