表格单元格不会紧密包裹内联元素

Question

我试图理解为什么包含内联元素的表格单元格不会将它们紧紧包裹起来。

更具体地说，我希望单元格与最高元素一样高。但在我的例子中，细胞比它应该更高。它的内容下面有一个底部间隙，而且内容不是垂直对齐的 - 字形应该在中间。

我希望得到任何解释。

这是我的代码：

* {
  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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td>
      <span class="glyphicon glyphicon-minus"></span>
      <div class="title-content">
	      <div class="color-box">
		      <div class="color-box-border">
				    <div class="color-box-canvas"></div>
				  </div>
			  </div>
	      <span>NODE</span>
      </div>
    </td>
  </tr>
</table>