How to align elements in a table spread over different cells in a row?

Question

How to align elements in a table spread over different cells in a row?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a table in which I enter data from my database. The value in green is the result of the value in red, although the amount of values in red varies. So that the user at first sight can locate, I want to align the different types of data in the same row.

The result I want:

My plan was to put each type of data in a div tag with the same class. But what is the css command to align all the divs of the same class?

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

html css

asked by Darius Man 08.09.2017 в 10:27

source

2 answers

0

Use the td s of the table instead of putting as many divs. I tried to give it the style more similar to your capture.

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>

answered by 08.09.2017 в 10:51

How to filter data in firebase (web)? How to convert or create a string to elements in js

score 1 · Accepted Answer

My advice is to do something one row for each section. Actually it's what you ask for, that's what the rows of a table are for.

You can customize the style of the table to your liking later.

The second option is to use div and dispense with the table.

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