Table structure without table tags, only divs

Question

I have a table structure with only divs and float left. I want it to be responsive (I know I have to add media queries). There is something wrong in my code. For now I want to reduce the window it changes to horizontal scroll which I tried and it doesn't work.

Here is my code:


  
      FM
      TNT
      
        Alarmes
        
          Criticité
          Sans Sup
          Non nominale
        
        

          (chart)
          2
          5
        
        

          (chart)
          10
          1
        
      
  
      
        TICKETS
        
          Non nominale
          A suivre
          Clôs
        
        
          5
          -
          2
        
        
          9
          -
          0
        
      

      
        SITES
        
          Perte HF
          -3DB
          Décro HS
          Alarme RX
          Alarme RX
          GE
        
        
          -
          8
          3
          7
          1
          6
        
         
          -
          5
          4
          8
          0
          2

Yvonne Aburrow · Accepted Answer

Step 1. Remove all the styles from the divs

Step 2 use inline-block instead of float.

Step 3 make each table-row enclosed in its own div with display: block except the ones you want alongside each other, which should be inline-block

Step 4 add a width to the parent div and overflow-x: auto;

Step 5 add a non-wrapping parent div around the two sections you want side-by-side, and put each of those in its own div

(if you want to only have the scrolling on the sites section, put that inside the div with class container)

HTML

    
  
  
    
       
    
    
       
    
    
        FM
    
    
        TNT
    
  

  
  
        Alarmes
  
  
          Criticité
          Sans Sup
          Non nominale
        
        
          (chart)
          2
          5
        
        
          (chart)
          10
          1
        

 

      
      
        TICKETS
      
        
          Non nominale
          A suivre
          Clôs
        
        
          5
          -
          2
        
        
          9
          -
          0
        


      
      
        SITES
      

      
        
        
          Perte HF
          -3DB
          Décro HS
        
        
          -
          8
          3
        
         
          -
          5
          4
        
  
        
          
            Alarme RX
            Alarme RX
            GE
          
          
            7
            1
            6
          
          
            8
            0
            2

CSS

.pink {
   display: inline-block;
   width:6rem;
   background:pink;
}

.gold {
   display: inline-block;
   width:6rem;
   background:gold;
}
.aqua {
    width:6rem;
    display: inline-block;
    background:aqua;
}

.red {
  background-color: red;
  color: #fff;
  width: 18.5rem;
}

.double-red {
  background-color: red;
  color: #fff;
  width: 37.25rem;  
}

.container {
  width: 18.5rem;
  overflow: auto;
}

.row {
  display: block;
}

.side-by-side {
  display: inline-block;
}

.no-wrap {
  width: 37.25rem;
  white-space: nowrap;
}

CodePen here: https://codepen.io/vogelbeere/pen/awxQMW

Table structure without table tags, only divs

Answers (1)

Related Questions