html - 具有突破标签解释的挑战性图表

Question

我对某些产品有一些神秘的命名法标签，我想使用带有分线标签的图表来解释它们，例如:

也就是说，我有一些长而神秘的标签(在这个例子中是“A-253-QZ”，在现实世界中通常有 8-10-12 个组件)，我需要解释它的部分，即“A”表示系列代号，例如，“253”表示“最大速度”，“QZ”表示可接受的电池类型。

我需要即时生成这些图表，所以我更喜欢使用 HTML + CSS 对其进行布局。

到目前为止，我最大的努力是制作一个复杂的表格，该表格使用其边框绘制这些突破线 - JSBin .看起来像这样:

我知道它不是最理想的:

• 它使用 HTML 表格进行格式化，这是邪恶的
• 垂直线正确居中，但它会产生大量的列来做到这一点
• 水平线不与线的中心对齐，而是与底部对齐
• 水平线不要触及说明文字的末尾

任何想法如何做得更好/没有表格/解决提到的问题？关于更好地表示概念有什么想法吗？

Answer 1

希望这是体面的!哈哈。试一试，我知道这不是最佳选择:

完整代码

<table class="breakout">
  <tr>
    <td></td>
    <td colspan="2" class="comp label">A</td>
    <td class="label">-</td>
    <td colspan="2" class="comp label">253</td>
    <td class="label">-</td>
    <td colspan="2" class="comp label">QZ</td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">series</td>
    <td class="ruler-hv"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">max speed</td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-hv"></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="ruler-v"></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2" class="caption">batteries type</td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-h"></td>
    <td class="ruler-hv"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

fiddle :http://output.jsbin.com/yalacoceda