JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<table class="monos" cellspacing="0"> 
    <tr> 
        <td class="separacionVertical enSeparadorHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionVertical enSeparadorHorizontal">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionVertical enSeparadorHorizontal">&nbsp;</td> 
    </tr>
    <tr> 
        <td class="separacionVertical primerSeparador">&nbsp;</td> 
        <td id="paginaNumero8" class="pagina" valign="bottom" align="left"> 
            <style> 
                #paginaNumero8 {
                background: url(imagenes/flechitaMonohi0.5.png) no-repeat top left;background: url(imagenes/flechitaMonohi0.5.png) no-repeat top left;                        }
            </style> 
            <span class="">8</span> 
        </td> 
        <td id="paginaNumero1" class="pagina" valign="bottom" align="right"> 
            <style> 
                #paginaNumero1 {
                background: url(imagenes/flechitaMonohd1.png) no-repeat top right;background: url(imagenes/flechitaMonovs1.5.png) no-repeat top left, url(imagenes/flechitaMonovi0.5.png) no-repeat bottom left, url(imagenes/flechitaMonohd1.png) no-repeat top right;                        }
            </style> 
            <span class="">1</span> 
        </td> 
        <td class="separacionVertical">&nbsp;</td> 
        <td id="paginaNumero4" class="pagina" valign="bottom" align="left"> 
            <style> 
                #paginaNumero4 {
                background: url(imagenes/flechitaMonohi1.png) no-repeat top left;background: url(imagenes/flechitaMonohi1.png) no-repeat top left;                        }
            </style> 
            <span class="">4</span> 
        </td> 
        <td id="paginaNumero5"...

CSS

table.monos {
    width: 95%;
    margin: 0px auto 0px;
    border: 3px solid #000000;
    background: url(http://dpascaner.dyndns.org/Trabajo/Step/imagenes/guiaMonos.png) no-repeat top left;
}

table.monos td.separacionVertical {
    width: 10px;
    border-left: 1px solid #000000;
}

table.monos td.separacionVertical.enSeparadorHorizontal,
table.monos td.separacionVertical.primerSeparador {
    border-left-width: 0px;
}

table.monos td.separacionHorizontal {
    height: 10px;
    border-top: 1px solid #000000;
}

table.monos td.separacionHorizontal.primerSeparador {
    border-top-width: 0px;
}

table.monos td.pagina {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    height: 70px;
    width: 100px;
}

table.monos td.pagina.primeraFila {
    border-top-width: 0px;
}

table.monos td.pagina.primeraColumna {
    border-left-width: 0px;
}

JavaScript

$("table.monos").each(function(){
    var primeraFila = $(this).find("tr:first");
    if(primeraFila.find("td.separacionHorizontal").length > 0){
        var colspan = primeraFila.find("td:not(.separacionVertical)").length,
            eqParaPinza = parseInt(colspan / 2),
            tdParaPinza = primeraFila.find("td:not(.separacionVertical):eq(" + eqParaPinza + ")");
        tdParaPinza.html("PINZA");
    }
});