4

Como consigo colocar sinais ou imagens, no meio das bordas de uma table, como na imagem?

assim como os + e o =

1 Resposta 1

9

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 tds 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .