将表格头部的列与主体对齐时出现问题[重复]

Question

我正在使用datatable，但在将header 表的列与body 中显示的数据对齐时遇到问题。

代码如下：

<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>

我对表格的看法如下：

如何对齐header 和body 的列？
我尝试使用width，但没有结果。

Answer 1

<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>