title: Table cell doesn't wrap inline elements tightly
body: <p>I'm trying to understand why a table cell containing inline elements doesn't wrap them tightly.</p>
  
  <p>To be more specific I would expect the cell to be as tall as the highest contained element. But in my example the cell is taller than it should be. There is a bottom gap under it's content and moreover, the content is not vertically aligned - the glyphicon should be in the middle. </p>
  
  <p>I would appreciate for any explanation.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  td {
    border: 1px solid black;
    vertical-align: middle;
    padding: 0;
  }
  
  .title-content {
    display: inline-table;
  }
  
  .color-box, .color-box + span {
      display: table-cell;
      vertical-align: middle;
  }
  
  .color-box {
      padding: 0 5px;
  }
  
  .color-box-border {
      border: 1px solid #cccccc;
      height: 16px;
      padding: 1px;
      width: 10px;
  }
  
  .color-box-canvas {
      height: 100%;
      width: 100%;
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
        &lt;div class="title-content"&gt;
         &lt;div class="color-box"&gt;
          &lt;div class="color-box-border"&gt;
          &lt;div class="color-box-canvas"&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
         &lt;span&gt;NODE&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>