1

Bom dia pessoal!

Tudo bem?

estou com um probleminha na minha tabela

Quero fazer uma tabela nesse modelo aqui

inserir a descrição da imagem aqui

Fiz desse jeito aqui, qual o problema? Quando está na versão mobile, a linha vertical ela se quebra (se separa).

inserir a descrição da imagem aqui

HTML

<section class="home-imovel-time">
    <div class="home-imovel-time-wrapper">
        <table class="home-imovel-time-info">
            <thead>
                <tr>
                    <th>Item</th>
                    <th></th>
                    <th>Empreendimento Convencional</th>
                    <th></th>
                    <th>Tico</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tempo para entrega</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
                <tr>
                    <td>36-48 meses</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
                <tr>
                    <td>12 meses</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

CSS

.home-imovel-time-info {
     margin-top: 30px;
}
 .home-imovel-time-info td, .home-imovel-time-info tr {
     color: black;
}
 .home-imovel-time-info td {
     padding: 10px;
}
 .home-imovel-time-info td.empty {
     border: none;
     display: initial;
     margin: 10px;
     border-right: 2px solid black;
     padding: 0;
     padding-bottom: 30px;
     padding-top: 15px;
}
 .home-imovel-time-info td:last-child {
     border: none;
}
 .home-imovel-time-info tr:not(:first-child) td {
     border-top: 2px solid black;
}

Esse código também está no jsfiddle.

https://jsfiddle.net/u59zphyv/

Quem puder me ajudar agradeço!

Valeu galera. Um Bom dia!

2 Respostas 2

2

Você pode fazer algo assim:

.home-imovel-time-info {
     margin-top: 30px;
}
 .home-imovel-time-info td, .home-imovel-time-info tr {
     color: black;
}
 .home-imovel-time-info td {
     padding: 10px;
     border: 4px solid #fff;
     border-top: none;
     border-bottom: none;
}
 .home-imovel-time-info td.empty {
     padding: 1px;
     background-color: #000;
}
 .home-imovel-time-info tr:not(:first-child) td {
     border-top: 2px solid black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<section class="home-imovel-time">
    <div class="home-imovel-time-wrapper">
        <table class="home-imovel-time-info">
            <thead>
                <tr>
                    <th>Item</th>
                    <th></th>
                    <th>Empreendimento Convencional</th>
                    <th></th>
                    <th>Tico</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tempo para entrega</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
                <tr>
                    <td>36-48 meses</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
                <tr>
                    <td>12 meses</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                    <td class="empty"></td>
                    <td>Lorem ipsum dolor si emet</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

Veja que só precisa colocar um padding: 1px e um background preto nas células .empty e um padding de 4px nas laterais das outras células. Ficará do mesmo jeito em qualquer resolução de tela. Repare também que há uma boa redução de código para chegar ao resultado.

1
  • Fala sam, resolveu aqui.. muitissimo obrigado cara! 16/11/2019 às 9:51
1

Ola viva adiciona algo assim. Com utilização de media queries, podes customizar / mudar comportamentos para mobile tablet, e várias resoluções ecrãs super wide, etc. Partilho o teu exemplo que resolve o problema, mas podes ter outros que terás de resolver dessa forma.

.home-imovel-time-info {
  margin-top: 30px;

  td,
  tr {
    color: black;
  }

  td {
    padding: 10px;

    &.empty {
      border: none;
      display: initial;
      margin: 10px;
      border-right: 2px solid black;
      padding: 0;
      padding-bottom: 30px;
      padding-top: 15px;
    }

    &:last-child {
      border: none;
    }
  }

  tr {
    &:not(:first-child) {
      td {
        border-top: 2px solid black;
      }
    }
  }

  //NEW
  @media (max-width: 781px) {

    td {
        &.empty {
          border-right: 2px solid black;
          padding-bottom: 100px;
          }
      }
    }
}
1
  • Cara muito obrigado! 16/11/2019 às 9:50

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 .