I have a table that has a very complex header and I am not able to stylize, the table lines get a higher height in the fields that were left with 2 lines, how can I fix this?
Follow the link JSFiddle
Thank you!
EDIT: and I also need the table lines to be very long, even without data inside, will it be easier to make vertical and horizontal lines in divs with css doq using tables? >
Run the code below and see it working:
.inANDout table {
text-transform: uppercase;
border-spacing: 0px;
border-collapse: separate;
margin: 0 auto;
color: #595c62;
font-size: 0.6em;
font-family: 'verdana';
text-align: center;
width: 100%;
display: block;
}
.inANDout table .top td, .inANDout table .dados:last-of-type td{
border-bottom: 2px solid #595c62;
}
.inANDout table td{
border-left: 2px solid #595c62;
padding:1em;
}
.inANDout table td:first-of-type{
border-left: none;
}<div class="inANDout">
<table>
<tr class="top">
<td class="inANDoutOpcoes">Opções</td>
<td class="inANDoutTipo">Tipo de Valor</td>
<td class="inANDoutTotal">Valor Total</td>
<td class="inANDoutParcelas">Nº de Parcelas</td>
<td class="inANDoutAtual">Parcela Atual</td>
<td class="inANDoutValor">Valor da Parcela</td>
<td class="inANDoutData">Data de Saída/Entrada</td>
</tr>
<tr class="dados">
<td class="dadosOpcoes">X Y Z</td>
<td class="dadosTipo">R$</td>
<td class="dadosTotal">150,00</td>
<td class="dadosParcelas">3</td>
<td class="dadosAtual">1</td>
<td class="dadosValor">50</td>
<td class="dadosData">08/09/2015</td>
</tr>
<tr class="dados">
<td class="dadosOpcoes">X Y Z</td>
<td class="dadosTipo">R$</td>
<td class="dadosTotal">150,00</td>
<td class="dadosParcelas">3</td>
<td class="dadosAtual">2</td>
<td class="dadosValor">50</td>
<td class="dadosData">08/10/2015</td>
</tr>
</table>
</div>See also in this Fiddle
For large rows, add line-height , example:
/* PARA LINHAS GRANDES */
.inANDout table .dados td{
line-height:160px;
}
See in this Fiddle .