How to put signals between <td>

Question

How I can place signs or images, in the middle of the edges of a table, as in the image?

Answer 1

Has many ways.

If you are using CSS3, follow a very interesting version. You can set the signals in HTML itself via data-Attributes, and control the CSS view.

Your HTML looks like this:

<table>
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>

And your CSS, like this:

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.        */
}

If you prefer older browser compatibility, you can omit the data-attributes and simply use class="mais", class="igual" us tds and in the CSS add this:

.mais  {content:"+"}
.igual {content:"="}

only in this case, you need to define a CSS input for each symbol used.

Applying in practice

Note that much of the CSS exposed here is for stylization, the essential parts of the technique mentioned have already been described above.

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