prevent tables to move when zooming - CSS

Question

. Hi guys, when I zoom out, the last tables move to the next row. Is there a way to fix the layout so that the tables don't move to the next row? Could you please give me some advice or a workaround so that I can fix this problem? I have tried many things but unfortunately I cannot find the solution. Thanks in advance for all your support and comments.

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: block;
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}


  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      

        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464

user_1360389 · Answer

set display of .blocks to flex to keep all tables keep in a row.

user_129127 · Answer

Apparently, browsers scale tables differently than other content at very small sizes. So you need a solution that will force three items per row. There are a few ways to handle this in CSS.

The first uses CSS Grid. See the changes to .blocks below. Note that IE11 has limited grid support, so you may need to add additional CSS to get it working in that browser.

table {
  width: 100%;
}

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

.blocks {
  display: inline-grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}


  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      

        4:  Testtask 4846465464
      
    
  
  
    
      
        Status
      
      
        1:  Testtask 25362541
      
      
        2:  Testtask 6545645641
      
      
        53:  Testtask 4846465463
      
      
        4:  Testtask 4846465464

Another solution that will work in all browsers (and probably get me some hate mail) is to use nested tables.

.first,
.second {
  width: 50px;
}

.third {
  text-align: right;
}

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-collapse: collapse;
  width: auto;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  font-size: 11px;
  width: auto;
  padding: 1px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

.vork {
  display: inline-block;
  text-align: right;
  width: 2.5em;
}


  
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        
          4:  Testtask 4846465464
        
      
    
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        
          4:  Testtask 4846465464
        
      
    
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        
          4:  Testtask 4846465464
        
      
    
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        
          4:  Testtask 4846465464
        
      
    
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        

          4:  Testtask 4846465464
        
      
    
    
      
        
          Status
        
        
          1:  Testtask 25362541
        
        
          2:  Testtask 6545645641
        
        
          53:  Testtask 4846465463
        
        
          4:  Testtask 4846465464

prevent tables to move when zooming - CSS

2 Answers