<table>
<tr class="signal"><tr>
<td data-signal="+">NF-e</td>
<td data-signal="+">CT-e</td>
<td data-signal="=">MDF-e</td>
<td>...</td>
</table>
td {
position: relative; /* para podermos usar absolute no :after */
}
td:after {
content:attr(data-signal); /* para pegar do HTML o sinal direto do HTML */
position: */absolute;
z-index:1; /* para que o sinal fique sobre o resto */
left:100%; /* alinhando com o canto direito */
top:0; /* e superior da célula atual */
transform:translate(-50%); /* arrumando entre uma célula e outra */
... /* aqui vocêe acertadetalhe o posicionamentoque mais precisar. */
}
Se preferir compatibilidade com navegadores mais velhos, pode omitir os data-attributes
e simplesmente usar class="mais"
, class="igual"
nos td
s e no CSS acrescentar isto:
.mais {content:"+"}
.igual {content:"="}
só que neste caso, precisa definir uma entrana no CSS para cada símbolo utilizado.
Note que boa parte do CSS aqui exposto é para estilização, as partes essenciais da técnica mencionada já foram descritas acima.
.signal td:after {
content:attr(data-signal);
display:block;
position:absolute;
z-index:1;
transform:translate(-50%);
left:100%;
top:0;
color:#ee0;#eef825;
}
.signal td,
.signal td:after {
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
font-weight:bold;
padding:10px;
}
.signal td {
position:relative;
background:#3bc;#29B9C8;
color:#fff;
}
.signal {
border-collapse: separate;
border-spacing:1px;
}
<table class="signal">
<tr>
<td data-signal="+">NF-e</td>
<td data-signal="+">CT-e</td>
<td data-signal="=">MDF-e</td>
<td>...</td>
</table>