无论我做什么，我都无法触摸 table 元素

Question

所以我在设计基于 table 元素的组织结构图时遇到了问题。我正在使用 <hr> 元素来创建连接器；但是，我无法让元素之间的死 space 消失。我花了最后一个小时试图弄清楚到底如何让它工作，但我似乎无法弄清楚。

我附上了一张图片来展示：

另一个问题更像是一个我没有真正研究过但无论如何都会问的问题。如何锁定 table 项目的高度。我已经很好地锁定了宽度，但我似乎无法将高度锁定到 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

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

Updated Codepen 添加了下面的 CSS。

hr {
    margin: 0 auto;
}

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

无论我做什么，我都无法触摸 table 元素

No matter what I do, I can't get the table elements to touch

html

css

css-tables