¿Por qué mi img deja un espacio sin llenar de 1px en una celda de la tabla?

Estoy escribiendo algo de html para enviarlo en un correo electrónico a los usuarios internos mediante programación. Todos usan Outlook 2016. (La codificación para Outlook es terrible, ya que las cosas simples como los fondos CSS no funcionan. Como tal, estoy atascado con la codificación html como si fuera en los 90).

El contenido es una especie de diagrama de flujo y debe ser visible en el cliente de correo ya que los usuarios no se molestarán en hacer clic en un enlace para llevarlos a una página externa. Como es Outlook, estoy haciendo todo con tablas. Básicamente, todo lo gráfico es una celda de tabla, pero necesito agregar puntas de flecha. He hecho esto coloreando el fondo de la celda y "tapándola" con un blanco sobre un recorte de punta de flecha transparente.ingrese la descripción de la imagen aquí

Estoy bastante allí, a excepción de un error realmente molesto en el que en algunas, pero no en todas las flechas, hay una línea de 1px a la izquierda de la flecha. (Los que están en la imagen con flechas rojas apuntando hacia ellos).

Mi imagen de punta de flecha tiene el mismo ancho que 2 x el ancho de mi columna, y el código es el siguiente para hacer una fila con 2 puntas de flecha (estoy usando 36 columnas, ya que el diseño se basa en una cuadrícula de 12 columnas, pero luego necesito para poder dividir más las celdas para hacer las flechas):

<tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>Y</td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>N</td><td class='blank' colspan=8></td>
</tr>
<tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
</tr>

Y el CSS relevante se muestra aquí:

td {
    background-color: #82d0f5;
    height: 48px;
    border-right: 6px solid white;
    padding: 6px;
    word-break: break-all;
}
td.blank {
    background-color: white;
    padding:0;
    height: 24px;
}       
td.shaft {
    background-color: #82d0f5;
    padding: 0px;
    vertical-align:bottom;
    height: 24px;
    border-left: 1px solid white;
}
img {
    width:100%;
    display:block;
}

¿Cómo me deshago de la línea problemática de la izquierda?

Respuestas (1)

Esto es realmente más una suposición sin el código completo...

td {
    background-color: #82d0f5;
    border-right: 6px solid white;
}

Hay un borde derecho y un fondo azul para todas las celdas.

td.blank {
    background-color: white;
}

Todavía tiene el borde derecho predeterminado, pero el fondo ahora es blanco.

td.shaft {
    background-color: #82d0f5;
    border-left: 1px solid white;
}

Todavía tiene el borde derecho predeterminado y el fondo azul, pero ahora también hay un borde izquierdo que cambia el ancho de estas celdas.

Entonces, las celdas de su tabla no tienen el mismo ancho. Puede agregar un borde izquierdo a todas las celdas para que todas las celdas tengan el borde izquierdo y derecho y simplemente cambie los colores. Podría usar box-sizing, pero dudo que sea compatible con Outlook.

También sugeriría citar todos los atributos de Outlook. La falta de comillas fue algo a lo que los navegadores aprendieron a adaptarse, pero crearon problemas antes de que los navegadores se pusieran al día. No me sorprendería si la falta de comillas causara problemas en Outlook.

También puede considerar agregar border="none"a las imágenes.

¿Por qué mi img deja un espacio sin llenar de 1px en una celda de la tabla?
RespuestasAquíPolítica de privacidad1y, 0v