3

Tenho uma tabela que tem um cabeçalho bem complexo e não estou conseguindo estilizar, as linhas da tabela ficam com uma altura maior nos campos que ficaram com 2 linhas, como posso arrumar isso ?

Segue o link do JSFiddle

Obrigado!

EDIT: e preciso tambem que as linhas da tabela fique bem longas, mesmo sem dados dentro, será q é mais facil fazer linhas verticais e horizontais em divs com css doq usando tabelas ?

inserir a descrição da imagem aqui

1 Resposta 1

2

Execute o código abaixo e veja funcionando:

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

Veja também neste Fiddle

Para linhas grandes, adicione line-height, exemplo:

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

Veja neste Fiddle.

1
  • 1
    certinho!! vlw!!
    – Alan PS
    Commented 9/09/2016 às 0:26

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 .