title: Bad border behavior using "display: table-cell"
body: <p>I'm currently working on a project where I have to build a large-data table using <code>&lt;div&gt;</code> elements. I won't use semantic <code>&lt;table&gt;</code> (it's for some personal project and lab).</p>
  
  <p>I did succeed with the main table structure, using the useful <code>display: table</code> 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.</p>
  
  <p><strong>HTML</strong>
      </p>
  
  <pre><code>&lt;!-- Main Container --&gt;
  &lt;div class="main-container"&gt;
    &lt;!-- Table container (where the display: table is applied) --&gt;
    &lt;div class="table-container"&gt;
  
      &lt;!-- First row --&gt;
      &lt;div class="table-row"&gt;
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Second row --&gt;
      &lt;div class="table-row"&gt;
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Third row --&gt;
      &lt;div class="table-row"&gt;
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
  
        &lt;div class="table-cell"&gt;
          &lt;span&gt;Table cell&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
      </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>JS</strong>
      </p>
  
  <pre><code>$(".table-cell").click(function() {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
      });
  </code></pre>
  
  <p>Here is the fiddle: <a href="https://jsfiddle.net/Lc0rE/9ntxmLk4/" rel="nofollow noreferrer">https://jsfiddle.net/Lc0rE/9ntxmLk4/</a></p>
  
  <p>Can you please help me to understand how to avoid to change both width and height of the cell I'm clicking on?</p>