Bad border behavior using "display: table-cell"

Question

I'm currently working on a project where I have to build a large-data table using

elements. I won't use semantic

 (it's for some personal project and lab).
I did succeed with the main table structure, using the useful display: table property but I'm encountering some difficulties when I try to apply CSS border style to the cells (fiddle link at the end of this post). The cell's width and height are increasing and I'm not able to avoid it playing out with the border properties.
HTML
    


  
  

    
    
      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      
    

    
    
      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      
    

    
    
      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      

      
        Table cell
      
    
  

CSS
    
body {
  font-family: "Helvetica", "Open-sans", "sans-serif";
}

.main-container {
  height: 200px;
  overflow-y: auto;
}

.table-container {
  display: table;
  border: 1px solid #666666;
  border-spacing: 5px;
  border-collapse: collapse;
  font-size: 13px;
}

.table-row {
  display: table-row;
  width: auto;
}

.table-cell {
  display: table-cell;
  min-width: 100px;
  padding-left: 3px;
  height: 100%;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #dde1e3;
  overflow: visible;
}

.selected {
  display: inline-block;
  border: 1px solid #00b9e6 !important;
  z-index: 100000 !important;
  background: #EBF7FF !important;
}
JS
    
$(".table-cell").click(function() {
      $(".selected").removeClass("selected");
      $(this).addClass("selected");
    });
Here is the fiddle: https://jsfiddle.net/Lc0rE/9ntxmLk4/
Can you please help me to understand how to avoid to change both width and height of the cell I'm clicking on?

Ionut Necula · Accepted Answer

Use box-sizing: border-box; on .selected. It's a miracle worker:

$(".table-cell").click(function() {
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
});

body {
  font-family: "Helvetica", "Open-sans", "sans-serif";
}
.main-container {
  height: 200px;
  overflow-y: auto;
}
.table-container {
  display: table;
  border: 1px solid #666666;
  border-spacing: 5px;
  border-collapse: collapse;
  font-size: 13px;
}
.table-row {
  display: table-row;
  width: auto;
}
.table-cell {
  display: table-cell;
  min-width: 100px;
  padding-left: 3px;
  height: 100%;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #dde1e3;
  overflow: visible;
}
.table-header {
  font-weight: bold;
}
.selected {
  display: inline-block;
  border: 1px solid #00b9e6 !important;
  z-index: 100000 !important;
  background: #EBF7FF !important;
  box-sizing: border-box;
  
}
.selected-remove-border {
  border: 0px;
}



  
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      

    
    
      
        Table cell
        
          
        
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell
      
      
        Table cell

Bad border behavior using "display: table-cell"

Answers (2)

Related Questions

Bad border behavior using &quot;display: table-cell&quot;

Answers (2)

Related Questions

Bad border behavior using "display: table-cell"