0

Tengo una tabla en la qual meto datos de mi base de datos. El valor en verde es resultado del valor en rojo, aunque la cantidad de valores en rojo varia. Para que el usuario a primera vista sepa ubicarse, quiero aliniar los diferentes tipos de datos de una misma fila.

El resultado que quiero:

introducir la descripción de la imagen aquí

Mi plan era meter cada tipo de dato en un div tag con la misma classe. Pero cual es el comando css para alinear todos los div de la misma classe.

.test1{
	display: inline-block;
	
}
<table class="tg" border="1">

  <tr>   
    <td class="tg-yw4l">	<div class="test2">ValorTypo1<br />ValorTypo1<br />ValorTypo1</div> 	<div class="test1">ValorTypo2</div>     </td>
    <td class="tg-yw4l">	<div class="test2"></div> 												<div class="test1">ValorTypo2</div>     </td>
    <td class="tg-yw4l">	<div class="test2">ValorTypo1<br />ValorTypo1</div> 					<div class="test1">ValorTypo2</div>    </td> 
    <td class="tg-yw4l">	<div class="test2">ValorTypo1<br />ValorTypo1</div> 					<div class="test1">ValorTypo2</div>     </td>
  </tr>

</table>

2 respuestas 2

1

Mi consejo es que hagas algo una fila para cada apartado. En realidad es lo que pides, es para lo que existen las filas de una tabla.

Puedes personalizar el estilo de la tabla a tu gusto después.

La segunda opción es utilizar div y prescindir de la tabla.

.primertr{
color:green;
}
.segundotr{
color:red;
}
tr{
vertical-align:top;
}

.row {
  width: 100%;
    text-align: center;
}
.block {
  width: 100px;
    display: inline-block;
    zoom: 1;
    vertical-align:top;
}
Ejemplo tabla
<table class="tg" border="1">

  <tr class="primertr">   
    <td>	
    <div>ValorTypo1<br />ValorTypo1<br />ValorTypo1</div> 	
   </td>
    
    <td>	
    <div></div> 												
    </td>
    
    <td>	
    <div>ValorTypo1<br />ValorTypo1</div>
    </td> 
    
    <td>	
    <div>ValorTypo1<br />ValorTypo1</div>
    </td>
  </tr>
  
  <tr class="segundotr">   
    <td>	

    <div>ValorTypo2</div>     
    <div>ValorTypo2</div>     
    </td>
    
    <td>									
    <div>ValorTypo2</div>
    </td>
    
    <td>	
		<div>ValorTypo2</div>
    </td> 
    
    <td>	
		<div>ValorTypo2</div>
    </td>
  </tr>

</table>

Ejemplo div
<div class="row primertr">
  <div class="block">ValorTypo1<br>ValorTypo1</div>
  <div class="block">ValorTypo1</div>
  <div class="block">ValorTypo1</div>
</div>
<div class="row segundotr">
  <div class="block">ValorTypo2</div>
  <div class="block">ValorTypo2<br>ValorTypo2</div>
  <div class="block">ValorTypo2</div>
</div>

10
  • Me gustaria hacerlo a traves de css. Commented el 8 sept. 2017 a las 8:48
  • Ya estás realizando los estilos necesarios con css. Puedes darle el formato que quieras con las propiedades border por ejemplo. Pero eso no quita que tengas que añadir una fila más en el código html.
    – Flowen
    Commented el 8 sept. 2017 a las 8:55
  • es mas como la respuesta de este chico jsfiddle.net/didierg/wZB9z en este post stackoverflow.com/questions/9277311/horizontally-aligning-divs Commented el 8 sept. 2017 a las 8:58
  • Pero en ese caso sólo utiliza una fila. No puedes aplicar dos tipos de alineación a un sólo elemento. Cada elemento tiene su propiedad. Tu ya estás utilizando tablas, lo que hace que ya los tengas alineados horizontalmente.
    – Flowen
    Commented el 8 sept. 2017 a las 9:00
  • 1
    No estás utilizando div sobre un body. Los tienes dentro de una tabla, que ya tiene su propia estructura con filas y columnas. Es por ello que necesitas una fila para cada caso.
    – Flowen
    Commented el 8 sept. 2017 a las 9:01
0

Aprobecha los tds de la tabla en lugar de meterle tantos divs. He intentado darle el estilo mas parecido al de tu captura.

table{
  border: 0px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

td{
  border: 0px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 200px;
  padding-left: 10px;
}

.test2{
  color:red;
}

.test1{
  color:green;
    padding-top:10px;
}

table{
  border-collapse: collapse;
}
<table class="tg" border="1">

  <tr>   
    <td class="test2">	
      ValorTypo1
    </td>
    <td class="test2">	
      ValorTypo1
    </td>
    <td class="test2">	
       
    </td>
    <td class="test2">	
       ValorTypo1
    </td>
  </tr>
  
  <tr>
    <td class="test2">	
      ValorTypo1
    </td>
    <td class="test2">	
       
    </td>
    <td class="test2">	
        
    </td>
    <td class="test2">	
      ValorTypo1
    </td>
  </tr>
  
  <tr>
    <td class="test2">	
       
    </td>
    <td class="test2">	
       
    </td>
    <td class="test2">	
       
    </td>
    <td class="test2">	
      ValorTypo1
    </td>
  </tr>
  
  <tr>
    <td class="test1">	
      ValorTypo2
    </td>	
    <td class="test1">	
      ValorTypo2
    </td>	
    <td class="test1">	
      ValorTypo2
    </td>	
    <td class="test1">	
      ValorTypo2
    </td>	
  </tr>
  
</table>

2
  • Debe haber otra manera. Lo que haces tu es anyadir mas td y tr y cambias la estructura completa. Commented el 8 sept. 2017 a las 9:02
  • Es lo que comenta en la otra respuesta, si lo quieres dentro de una tabla esta seria la estructura correcta. Si lo quieres en divs no uses la tabla.
    – GDP
    Commented el 8 sept. 2017 a las 9:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.