td
{
\t border: 1pt solid black;
}
td.diagonalRising
{
\t background: linear-gradient(to right bottom, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}
td.diagonalFalling
{
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}
td.diagonalCross
{
\t position: relative;
\t background: linear-gradient(to right bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49.9%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 51%,rgba(0,0,0,0) 51.1%,rgba(0,0,0,0) 100%);
}
td.diagonalCross:after
{
\t content: "";
\t display: block;
\t position: absolute;
\t width: 100%;
\t height: 100%;
\t top: 0;
\t left: 0;
\t z-index: -1;
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}
<table>
<tr><td>a</td><td class="diagonalRising">abc</td><td class="diagonalFalling">abcdefghijklmnopqrstuvwxyz</td><td class="diagonalCross">abcdefghijklmnopqrstuvwxyz<br>qaywsxedcrfvtgbzhnujmikolp</td></tr>
</table>
Intente utilizar una imagen de fondo CSS de una línea diagonal de 45 grados y estírela. –
¿Alguna razón particular por la que está utilizando un diseño de tabla en lugar de un diseño div? Las tablas son un PITA al estilo. –
La página es muy similar a una hoja de cálculo, por lo que las tablas se adaptaron fácilmente. Si esto se puede resolver con divs más fácil, también estaría bien. – Josh