CSS - Format a table

Question

I have a table that has a very complex header and I’m not being able to style, the table rows have a higher height in the fields that have 2 lines, how can I fix this ?

Follow the link from Jsfiddle

Thank you!

EDIT: it is also necessary that the table lines stay very long, even without data inside, q it is easier to make vertical and horizontal lines in Divs with css doq using tables ?

Answer 1

Run the code below and see 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 lines, add line-height, example:

/* PARA LINHAS GRANDES */
.inANDout table .dados td{
  line-height:160px;
}

Behold in this Fiddle.