Espacio vacío (o espacio en blanco) que se muestra entre celdas en ajax datos obtenidos alimentados a la tabla en el navegador IE9 solamente,

Question

Como sugiere el título, tengo una tabla que se carga desde la base de datos. Primero solo se recogen 15 filas. Más tarde hay forma de hacer que muestre 15, 50 y 100 registros para mostrar usando la lista desplegable. Que se obtiene a través de ajax. De alguna forma, si hago que el registro de búsqueda cuente más de 59 o más, se crea espacio vacío entre las celdas en una fila al azar. Sucede solo en los navegadores IE9. IE Browsers versión < 9 son buenos, Firefox, Chrome, Safari también son buenos. Esta es mi primera pregunta, así que no puedo publicar imágenes, así que coloco algunos formularios numéricos a continuación.

| ..1 .. || ..2 .. || ... 3 ... || .... 4 .... || .5. || ..6 .. | | ..7 .. |

Supongamos que lo anterior es una fila, la barra actúa como borde derecho e izquierdo. Lo que obtengo en IE9 ajax es información similar a la siguiente

| ..1 .. || ..2 .. || ... 3 ... || .... 4 .... | | .5. || ..6 .. || ..7 .. |

| ..1 .. | _ _ _ | ..2 .. || ... 3 ... || .... 4 .... || .5. || ..6 .. || ..7 .. |

| ..1 .. || ..2 .. || ... 3 ... || .... 4 .... || .5. || ..6 .. | | ..7 .. |

| ..1 .. || ..2 .. || ... 3 ... | _ _ _ _ | .... 4 .... || .5. || .. 6 .. || ..7 .. |

| ..1 .. || ..2 .. || ... 3 ... || .... 4 .... || .5. || ..6 .. | | ..7 .. |

Verá el espacio (representado por _ 'guión bajo') en la fila segunda (después de la primera columna) y la cuarta (después de la tercera columna). No tengo ni idea, ya que la barra de herramientas de desarrollador/depurador de IE no está ayudando mucho. El efecto no es aleatorio ya que obtengo el mismo espacio vacío entre la celda al actualizar o después de borrar la caché. ¿Podría ser debido a que los datos recuperados de ajax tienen algo que ver con el renderizado de IE9? ¿Alguien se enfrenta a tal problema o uno cercano? Cualquier ayuda sería apreciada.

Answer 1

dhiraj - No parece haber ninguna declaración oficial sobre este error IE9 de MS, pero lo he experimentado en más de una ocasión. Parece estar relacionado con los espacios en blanco entre las filas de la tabla y las celdas en el código fuente y solo ocurre en las tablas que se procesan en UpdatePanels después de una devolución de datos de Ajax. He encontrado una solución (fea) para el problema.

Si usa un control ListView, tendrá la capacidad de eliminar los espacios en blanco en la estructura de su tabla. Desafortunadamente hace que tu código fuente sea más ilegible, pero parece que soluciona el problema. Así, por ejemplo, si su código original era la siguiente:

<asp:ListView ID="ListView1" runat="server"> 
<LayoutTemplate> 
    <table> 
     <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder> 
    </table> 
</LayoutTemplate> 
<ItemTemplate> 
    <tr> 
     <td><%# Eval("field1") %></td> 
     <td><%# Eval("field2") %></td> 
     <td><%# Eval("field3") %></td> 
     <td><%# Eval("field4") %></td> 
    </tr> 
</ItemTemplate> 

Su código "fija" tendría que tener este aspecto:

<asp:ListView ID="ListView1" runat="server"> 
<LayoutTemplate> 
    <table><asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder></table> 
</LayoutTemplate> 
<ItemTemplate> 
    <tr><td><%# Eval("field1") %></td><td><%# Eval("field2") %></td><td><%# Eval("field3") %></td><td><%# Eval("field4") %></td></tr> 
</ItemTemplate> 

Espero que esto ayude !

Answer 2

tratar de colocar el contenido de la etiqueta en la etiqueta <td><div>

Answer 3

Sólo me gustaría añadir que he tenido el mismo problema.

Al cargar una tabla en AJAX se producen huecos aleatorios entre los elementos de TD.

código que vuelve esta mesa fue:

echo(" <tr>") 
echo("  <td>Column1</td>") 
echo("  <td>Column2</td>") 
echo("  <td>Column3</td>") 
echo("  <td>Column4</td>") 
echo("  <td>Column5</td>") 
echo(" </tr>") 

eco() es un simple envoltorio para response.write.

Como se sugiere en los comentarios aquí, simplemente retira el espacio en blanco en la respuesta de la siguiente manera:

echo("<tr>") 
echo("<td>Column1</td>") 
echo("<td>Column2</td>") 
echo("<td>Column3</td>") 
echo("<td>Column4</td>") 
echo("<td>Column5</td>") 
echo("</tr>") 

Esto resolvió el problema inmediatamente, pero fea marcado mesa ahora hace de forma coherente. Deffo un error en IE9

Answer 4

Tuve el mismo problema. Espaciador aleatorio entre celdas en IE9 en un panel de actualización después de una devolución de datos.

Como han sugerido otros, elimine los espacios entre los elementos de la celda de la tabla. Es un poco feo pero parece funcionar!

de esta ...

<tr class="rpt-row-alt"> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
    <td> 
     <%--Cell Contents --%> 
    </td> 
</tr> 

a este ...

<tr class="rpt-row-alt"> 
    <td> 
     <%--Cell Contents --%> 
    </td><td> 
     <%--Cell Contents --%> 
    </td><td> 
     <%--Cell Contents --%> 
    </td><td> 
     <%--Cell Contents --%> 
    </td><td> 
     <%--Cell Contents --%> 
    </td><td> 
     <%--Cell Contents --%> 
    </td> 
</tr> 

resuelto el problema para mí! Solo parece ser el espacio entre los elementos de Datos de tabla, por lo que no es necesario tener toda la fila de la tabla en una línea de marca.