将表格头部的列与主体对齐时出现问题[重复]
Posted
技术标签:
【中文标题】将表格头部的列与主体对齐时出现问题[重复]【英文标题】：Problem aligning the columns of the head of a table with the body [duplicate] 【发布时间】：2019-03-04 00:48:23 【问题描述】：我正在使用datatable，但在将header 表的列与body 中显示的数据对齐时遇到问题。
代码如下：
<table id="datatable_fixed_column" class="table table-striped table-bordered" >
<thead>
<TR class="texto">
<TH align="center" colspan="8" > </TH>
<TH align="center" colspan="2" >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" >Cantidad de </TH>
<TH align="center" colspan="2">Resolución</TH>
</TR>
<TR class="texto">
<TH align="center" >Rit</TH>
<TH align="center" >Nombre Funcionario</TH>
<TH align="center" >Nombre Juez</TH>
<TH align="center" >Tramite</TH>
<TH align="center" >Invalidado</TH>
<TH align="center" >Doc. Res</TH>
<TH align="center" >Doc. Esc</TH>
<TH align="center" >Días</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Escritos Resolución</TH>
<TH align="center" >Fecha Firma</TH>
<TH align="center" >HH:MM</TH>
</TR>
</thead>
<tbody>
<c:forEach items="$lstdatos" var="fun">
<TR class="texto">
<TD align="center"><c:out value="$fun.rit" /></TD>
<TD align="center"><c:out value="$fun.nombres" /></TD>
<TD align="center"><c:out value="$fun.gls_juez" /></TD>
<TD align="center"><c:out value="$fun.gls_tramite" /></TD>
<TD align="center"><c:out value="$fun.estado" /></TD>
<TD align="center"><c:out value="$fun.doc_resolucion" /></TD>
<TD align="center"><c:out value="$fun.doc_escrito" /></TD>
<TD align="center"><c:out value="$fun.dias" /></TD>
<TD align="center"><c:out value="$fun.fec_1erPreg" /></TD>
<TD align="center"><c:out value="$fun.hor_1erPreg" /></TD>
<TD align="center"><c:out value="$fun.fec_ultPreg" /></TD>
<TD align="center"><c:out value="$fun.hor_ultPreg" /></TD>
<TD align="center"><c:out value="$fun.fec_despacho" /></TD>
<TD align="center"><c:out value="$fun.hor_despacho" /></TD>
<TD align="center"><c:out value="$fun.fec_devuelto" /></TD>
<TD align="center"><c:out value="$fun.hor_devuelto" /></TD>
<TD align="center"><c:out value="$fun.fec_desxdevjuez" /></TD>
<TD align="center"><c:out value="$fun.hor_desxdevjuez" /></TD>
<TD align="center"><c:out value="$fun.can_escritos" /></TD>
<TD align="center"><c:out value="$fun.fec_firmaRes" /></TD>
<TD align="center"><c:out value="$fun.hor_resolucion" /></TD>
<script>
FLG_datos=1;
ind++;
</script>
</TR>
</c:forEach>
</tbody>
</table>
我对表格的看法如下：
如何对齐header 和body 的列？
我尝试使用width，但没有结果。
【问题讨论】：
看table.columns.adjust().draw() datatable jquery - table header width not aligned with body width 或 dataTable Headers Misaligned 的可能重复 【参考方案1】：<table id="datatable_fixed_column" class="table table-striped table-bordered" >
<thead>
<TR class="texto">
<TH align="center" colspan="2" > </TH>
<TH align="center" colspan="2" >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" >Cantidad de </TH>
<TH align="center" colspan="2">Resolución</TH>
</TR>
<TR class="texto">
<TH align="center" >Rit</TH>
<TH align="center" >Nombre Funcionario</TH>
<TH align="center" >Nombre Juez</TH>
<TH align="center" >Tramite</TH>
<TH align="center" >Invalidado</TH>
<TH align="center" >Doc. Res</TH>
<TH align="center" >Doc. Esc</TH>
<TH align="center" >Días</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Fecha</TH>
<TH align="center" >HH:MM</TH>
<TH align="center" >Escritos Resolución</TH>
<TH align="center" >Fecha Firma</TH>
<TH align="center" >HH:MM</TH>
</TR>
</thead>
<tbody>
<c:forEach items="$lstdatos" var="fun">
<TR class="texto">
<TD align="center"><c:out value="$fun.rit"/></TD>
<TD align="center"><c:out value="$fun.nombres"/></TD>
<TD align="center"><c:out value="$fun.gls_juez"/></TD>
<TD align="center"><c:out value="$fun.gls_tramite"/></TD>
<TD align="center"><c:out value="$fun.estado"/></TD>
<TD align="center"><c:out value="$fun.doc_resolucion"/></TD>
<TD align="center"><c:out value="$fun.doc_escrito"/></TD>
<TD align="center"><c:out value="$fun.dias" /></TD>
<TD align="center"><c:out value="$fun.fec_1erPreg" /></TD>
<TD align="center"><c:out value="$fun.hor_1erPreg"/></TD>
<TD align="center"><c:out value="$fun.fec_ultPreg" /></TD>
<TD align="center"><c:out value="$fun.hor_ultPreg"/></TD>
<TD align="center"><c:out value="$fun.fec_despacho" /></TD>
<TD align="center"><c:out value="$fun.hor_despacho"/></TD>
<TD align="center"><c:out value="$fun.fec_devuelto"/></TD>
<TD align="center"><c:out value="$fun.hor_devuelto"/></TD>
<TD align="center"><c:out value="$fun.fec_desxdevjuez" /></TD>
<TD align="center"><c:out value="$fun.hor_desxdevjuez" /></TD>
<TD align="center"><c:out value="$fun.can_escritos" /></TD>
<TD align="center"><c:out value="$fun.fec_firmaRes"/></TD>
<TD align="center"><c:out value="$fun.hor_resolucion" /></TD>
<script>
FLG_datos=1;
ind++;
</script>
</TR>
</c:forEach>
</tbody>
</table>【讨论】：
似乎对我不起作用，您能解释一下您在代码中所做的更改吗？看起来您只是在代码 sn-p 中复制粘贴的相同代码？ ***.com/help/how-to-answer以上是关于将表格头部的列与主体对齐时出现问题[重复]的主要内容，如果未能解决你的问题，请参考以下文章
将 .on() 与动态添加的元素一起使用时出现问题 [重复]