3

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: inserir a descrição da imagem aqui

Também é demonstrado no snippet acima o problema.

Como soluciono isso para que se comporte da maneira que preciso?

2
  • CypherPotato, vc quer tipo um sumário? Isto?
    – user148170
    Commented 27/08/2019 às 13:25
  • @LeandroAlfredo mais ou menos isso Commented 27/08/2019 às 13:27

2 Respostas 2

3

Basta você adicionar um elemento <span> com display: flex e definir que o pseudo-elemento ::after como flex-grow: 1 para ocupar todo o espaço restante.

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

Assim, basta moldar o elemento ::after de forma a gerar a linha que deseja:

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

1
  • A sua resposta é útil porque é o contrário da que o Sam propõe: a linha é aplicada a todos os <td>, com exceção das que utilizarem uma classe específica. No seu cenário, os <td> que usarem a classe serão moldados. Commented 27/08/2019 às 13:46
1

Há uma forma de fazer isso colocando a linha na primeira célula de cada linha em vez da última, como está fazendo. E colocar o texto dentro de um span com um fundo igual ao fundo da célula (no exemplo, fundo branco). O fundo do texto irá encobrir a parte inicial da linha:

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 que movi a linha 20px para a direita, o que é suficiente para que o span com o texto encubra o início da linha. E um padding-right de 10px para dar um espaçamento.

3
  • Uma dúvida: para remover a linha duma determinada <td>, como faço? Commented 27/08/2019 às 13:34
  • 1
    Como vc está aplicando a linha em todas as td's, você poderia criar uma regra no CSS através de uma classe: tr td.semlinha::before{ display: none; }... e colocar na td a classe .semlinha, por exemplo: <td class="semlinha" style="width: 50%">
    – Sam
    Commented 27/08/2019 às 13:41
  • Deu certo. Obrigado pela ajuda! Commented 27/08/2019 às 13:42

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 .