Como consigo colocar sinais ou imagens, no meio das bordas de uma table, como na imagem?
1 Resposta
Tem muitas maneiras.
Se estiver usando CSS3, segue uma versão bem interessante. Você pode definir os sinais no próprio HTML via data-attributes, e controlar a exibição em CSS.
Seu HTML fica assim:
<table>
<tr>
<td data-signal="+">NF-e</td>
<td data-signal="+">CT-e</td>
<td data-signal="=">MDF-e</td>
<td>...</td>
</table>
E seu CSS, assim:
td {
position: relative; /* para podermos usar absolute no :after */
}
td:after {
content:attr(data-signal); /* para pegar 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 */
... /* e detalhe o que 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.
Aplicando na prática
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:#eef825;
text-shadow:0 0 2px #169;
}
.signal td,
.signal td:after {
font-family:Arial,Helvetica,sans-serif;
font-size:25px;
font-weight:bold;
padding:12px;
}
.signal td {
position:relative;
background:#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>