无论我做什么，我都无法触及表格元素

Question

所以我根据表格元素设计组织结构图，我遇到了问题。我使用<hr>元素来创建连接器;但是，我不能让元素之间的死空间消失。我花了最后一小时试图弄清楚它是如何让它发挥作用的，我似乎无法弄明白。

我已经附上了一张图片：

另一个问题更多的是我还没有真正研究过的问题，但无论如何我还是会问。如何锁定表项的高度。我把宽度锁定得很好，但我似乎无法将高度锁定到70px。

以下是一些选择代码：

<table class="orgchart" cellspacing="0" cellpadding="0">
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td class="item"><a href="#director">Director</a></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>

CSS：

.orgchart td {
  width: 70px;
  height: 70px;
  text-align: center;
  overflow: hidden;
  white-space: no-wrap;
}

.divider td {
  height: 20px;
}

.item {
  border: 2px solid black;
}

这是CodePen：http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110

Answer 1

margin周围有一个<hr>。从<hr>中删除顶部和底部边距。所有浏览器都将默认样式应用于元素，但并不总是相同。因此，您将看到重置和规范化样式表，用于改善视觉一致性和开发难度。

添加了CSS的{p> Updated Codepen。

hr {
    margin: 0 auto;
}

如果我正在做这个项目，我会找到一个简单的网格框架来布局DIV，或者我可能会将此图表创建为内联SVG。