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

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>

小提琴:http://output.jsbin.com/yalacoceda

Answer 2

这是我的尝试。只是试图语义化，尽可能少的额外元素

.container {
  width: 400px;
  height: 200px;
}

.container * {
  display: inline-block;
  float: left;
  margin: 4px;
  position: relative;
}

.item:first-of-type {
  margin-left: 200px;
}


.item:before {
  content: attr(data-label);
  text-align: right;
  position: absolute;
  right: calc(100% + 10px);
  height: 30px;
  width: 200px;
} 

.item:nth-of-type(1):before {
  bottom: -50px;
} 

.item:nth-of-type(2):before {
  bottom: -80px;
} 

.item:nth-of-type(3):before {
  bottom: -110px;
} 

.item:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0px;
  box-shadow: inset 0px 2px 0px blue;
  background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-position: 50% 0%, 0% calc(100% - 10px);
  background-size: 2px calc(100% - 10px), 50% 2px;
  background-repeat: no-repeat;
} 

.item:nth-of-type(1):after {
  top: 30px;
  height: 30px;
  z-index: -1;
} 

.item:nth-of-type(2):after {
  top: 30px;
  height: 60px;
  z-index: -2;
} 

.item:nth-of-type(3):after {
  top: 30px;
  height: 90px;
  z-index: -3;
}

<div class="container">
    <div class="item" data-label="Category 1">FIRST</div>
    <p>-</p>
    <div class="item" data-label="Category 2">SEC</div>
    <p>-</p>
    <div class="item" data-label="Category 3">THIRD</div>
</div>

再比如，好一点的，还有收缩包装容器。

伪元素不再是绝对定位的，因此容器可以调整大小。并避免一些计算的使用，例如，这些使用总是比填充更难维护。

不过，我仍然需要在容器上预先设置填充物。不知道如何避免这种情况......

.container {
  border: solid 1px red;
  display: inline-block;
  padding-left: 200px;
}

.container * {
  display: inline-block;
  float: left;
  margin: 4px;
  position: relative;

}

.item:before {
  content: attr(data-label);
  text-align: right;
  position: absolute;
  display: inline-block;
  right: 100%;
  height: 30px;
  width: 200px;
  padding-right: 8px;
} 

.item:nth-of-type(1):before {
  top: 30px;
} 

.item:nth-of-type(2):before {
  top: 55px;
} 

.item:nth-of-type(3):before {
  top: 85px;
} 

.item:after {
  content: "";
  display: inline-block;
  width: 100%;
  left: 0px;
  box-shadow: inset 0px 2px 0px blue;
  background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
  background-position: 50% 0%, 0% calc(100% - 10px);
  background-size: 2px calc(100% - 10px), 50% 2px;
  background-repeat: no-repeat;
} 

.item:nth-of-type(1):after {
  height: 30px;
} 

.item:nth-of-type(2):after {
  height: 60px;
} 

.item:nth-of-type(3):after {
  height: 90px;
} 

<div class="container">
    <div class="item" data-label="Category 1">FIRST</div>
    <p>-</p>
    <div class="item" data-label="Category 2">SEC</div>
    <p>-</p>
    <div class="item" data-label="Category 3">THIRD</div>
</div>