How to make a horizontal line between two <td>?

Question

I have a <table> divided into two columns, and I need that in the vertical middle of each column have a line starting from the <td> from the left to the <td> right, in this format:

Conteudo ----------------------------- Valor
Outro conteudo ----------------------- Valor 2
Tenho outra coisa aqui --------------- TD com
                                       outros
                                       valores

I am using the code below in my project. I use jQuery and Bootstrap 4 in it.

table { border-collapse: collapse; }
table td { padding: 6px 12px; border: 1px solid #000; }

tr td:last-of-type { position: relative; }

tr td:last-of-type::before {
  position: absolute;
  content: "";
  left: -.5em;
  top: 50%;
  margin-top: 0px; /* Fine tuning */
  width: 100%;
  height: 1px;
  background-color: gray;
}

<!-- Imports -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- /Imports -->

<table class="table-borderless" style="width: 100%">
  <tbody>
    <tr>
      <td style="width: 50%">Conteúdo 1</td>
      <td style="width: 50%">Valor</td>
    </tr>
    <tr>
      <td style="width: 50%">Conteúdo 2</td>
      <td style="width: 50%">Valor</td>
    </tr>
  </tbody>
</table>

But this is the result when applied:

Also demonstrated in the above snippet the problem.

How do I fix this so that you behave the way I need to?

Answer 1

Just add an element <span> with display: flex and define that the pseudo-element ::after as flex-grow: 1 to occupy all the remaining space.

.with-line::after {
  display: inline-block;
  content: '';
  background: red;
  flex-grow: 1;
}

.with-line {
  background: green;
  display: flex;
}

<table class="table-borderless" style="width: 100%">
  <tbody>
    <tr>
      <td style="width: 50%"><span class="with-line">Conteúdo 1</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
    <tr>
      <td style="width: 50%"><span>Conteúdo 2</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
  </tbody>
</table>

So just shape the element ::after in order to generate the line you want:

.with-line::after {
  display: inline-block;
  content: '';
  flex-grow: 1;
  border-top: 1px dashed black;
  height: 1px;
  margin: 0.5rem 0.5rem 0 0.5rem;
}

.with-line {
  display: flex;
}

<table class="table-borderless" style="width: 100%">
  <tbody>
    <tr>
      <td style="width: 50%"><span class="with-line">Conteúdo 1</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
    <tr>
      <td style="width: 50%"><span>Conteúdo 2</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
  </tbody>
</table>

Answer 2

There is a way to do this by placing the line in the first cell of each line instead of the last one, as you are doing. And putting the text inside a span with a background equal to the cell background (in the example, white background). The text background will cover the initial part of the line:

table { border-collapse: collapse; }
table td { padding: 6px 12px; border: 1px solid #000; }

tr td:first-child { position: relative; }

tr td:first-child::before {
  position: absolute;
  content: "";
  left: 20px;
  top: 50%;
  margin-top: 0px; /* Fine tuning */
  width: calc(100% - 20px);
  height: 1px;
  background-color: gray;
  z-index: -1;
}

td span{
   background: white;
   padding-right: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- /Imports -->

<table class="table-borderless" style="width: 100%">
  <tbody>
    <tr>
      <td style="width: 50%"><span>Conteúdo 1</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
    <tr>
      <td style="width: 50%"><span>Conteúdo 2</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
  </tbody>
</table>

Note that I moved the line 20px to the right, which is sufficient for the span with the text cover the beginning of the line. And a padding-right 10px to give a spacing.