html div grid not aligning contents in columns (vertically)

Question

I am having div which is in rows and col. I am trying to resolve that, my header headings are not aligning with its contents which is in next rows and col. For example:

As you can see my headers are not aligned with the lower contents. Kindly check the code below and let me know the best solution for this.

.orders {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  overflow-y: auto;
  margin-left: 0px;
}

.header-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
  background: #868686;
  color: white;
}

.header {
  background: black;
  color: white;
  font-weight: bolder;
}

.pointer {
  cursor: pointer;
}

.orders .order-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  justify-content: space-evenly;
}

.orders .col.start {
  justify-content: flex-start;
}

.orders .col {
  display: flex;
  flex: 1;
  padding: 10px;
}

.header-text .header-status:before {
    content: '- Collapse';
    display: inline;
}

.header-text.active .header-status:before {
    content: '+ Expand';
}


  
    Name
    Date/Time
    Phone
    PAX
    Description
    Table
    
  
  
    
      
        New 
        
        
        
        
        
        
        
      
    
    
      
        Mitchell Admin
        2022-05-30 10:00:00
        +1 555-555-5555
        1
        description
        
        
      
    
  

  
    
      
        Confirm 
        
        
        
        
        
        
        
      
    
    
      
        Mitchell Admin
        2022-06-17 12:00:00
        +1 555-555-5555
        1
        test
        
        
      
      
        Mitchell Admin
        2022-05-30 10:00:00
        +1 555-555-5555
        1
        test

user_10441671 · Answer

display: table

If your HTML is somewhat negotiable, you can solve this by enforcing a table display:

.orders {
  display: table;
}

.header-row,.order-row {
  display: table-row;
}

.col {
  display: table-cell;
}

Your HTML currently has mistakes as well, there are more columns than headlines. Two lines have even 2 columns too many.

See below snippet for a demonstration with borders and cells visualized.
This assumes your HTML is the equivalent of table > tr > td.

* { margin: 0; padding: 0;}

body {
  padding: 5px;
  font-family: sans-serif;
}

.orders {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
}

.header-row,.order-row {
  display: table-row;
}

.col {
  display: table-cell;
  background-color: #efefef;
  padding: 3px;
}

.header-text {
  justify-content: space-evenly;
  background: #868686;
  color: white;
}

.header-text .header-status:before {
  content: '- Collapse';
  display: inline;
}

.header-text.active .header-status:before {
  content: '+ Expand';
}


  
    Name
    Date/Time
    Phone
    PAX
    Description
    Table
    
  
  
    New 
    
    
    
    
    
    
    
  
  
    Mitchell Admin
    2022-05-30 10:00:00
    +1 555-555-5555
    1
    description
    
    
  
  
    Confirm 
    
    
    
    
    
    
    
  
  
    Mitchell Admin
    2022-06-17 12:00:00
    +1 555-555-5555
    1
    test
    
    
  
  
    Mitchell Admin
    2022-05-30 10:00:00
    +1 555-555-5555
    1
    test

As you can see I removed div.content, div.header and div.pointer for this to work.

html div grid not aligning contents in columns (vertically)

1 Answers

display: table