html - 无论我做什么，我都无法触摸表格元素

Question

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

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

另一个问题是一个我还没有真正研究过但无论如何都会问的问题。如何锁定表格元素的高度。我已经很好地锁定了宽度，但我似乎无法将高度锁定为 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> 中删除顶部和底部边距.所有浏览器都将默认样式应用于元素，但并不总是相同的。因此，您将看到用于改进视觉一致性和开发难题的重置和规范化样式表。

Updated Codepen添加了下面的 CSS。

hr {
    margin: 0 auto;
}

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