Tenho uma <table>
dividida em duas colunas, e eu preciso que no meio vertical de cada coluna tenha uma linha partindo do <td>
da esquerda até o <td>
da direita, neste formato:
Conteudo ----------------------------- Valor
Outro conteudo ----------------------- Valor 2
Tenho outra coisa aqui --------------- TD com
outros
valores
Estou utilizando o código abaixo no meu projeto. Utilizo jQuery e Bootstrap 4 no mesmo.
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>
Mas este é o resultado quando aplicado:
Também é demonstrado no snippet acima o problema.
Como soluciono isso para que se comporte da maneira que preciso?