Bom dia pessoal!
Tudo bem?
estou com um probleminha na minha tabela
Quero fazer uma tabela nesse modelo aqui
Fiz desse jeito aqui, qual o problema? Quando está na versão mobile, a linha vertical ela se quebra (se separa).
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!