Объяснение диаграммы с пояснениями меток прорыва

У меня есть некоторые критические номенклатурные метки для некоторых продуктов, и я хотел бы объяснить их, используя диаграмму с ярлыками прорыва, что-то вроде этого:

То есть у меня есть какой-то длинный и загадочный ярлык ( "A-253-QZ" в этом примере, в реальном мире обычно есть 8-10-12 компонентов), и мне нужно объяснить его части, что "A" означает обозначение серий, "253", например, "максимальная скорость" и "QZ" являются приемлемыми типами батарей.

Мне нужно сгенерировать эти диаграммы "на лету", поэтому я бы предпочел, чтобы он был выложен с помощью HTML + CSS.

Мое лучшее усилие до сих пор представляет собой сложную таблицу, которая использует свои границы для рисования этих строк прорыва - JSBin. Это выглядит так:

Я понимаю, что он довольно субоптимальный:

он использует HTML-таблицы для форматирования, то есть зло
вертикальные линии правильно центрированы, но он генерирует ад столбцов, чтобы сделать это
горизонтальные линии не выровнены по центру линии, а внизу
горизонтальные линии не касаются конца заголовков объяснений

Любые идеи, как сделать это лучше/без таблиц/исправить упомянутые проблемы? Любые идеи по лучшему представлению концепции?

Ответ 1

Вот моя попытка. Просто пытаюсь быть семантичным, так как несколько дополнительных элементов, как я мог

.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>

Ответ 2

Надеюсь, это прилично! Лол. Просто попробуйте, я знаю, что это не оптимально:

Полный код

<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

Ответ 3

Вы пытаетесь отобразить следующую информацию:

series: A
max-speed: 253
batteries type: QZ

Было бы уместно, если вы измените свою разметку на dl, dd и dt. В следующем примере отображаются данные так, как вы хотите, но со следующими ограничениями:

Исправлена ширина и высота меток.
Высота значений фиксирована.

dl, dt, dd {
  margin: 0;
}
dl {
  padding-top: 48px;
  overflow: hidden;
}
/* labels */
dt {
  float: left;
  clear: left;
  width: 96px;
  line-height: 24px;
  background-color: #FFFFFF;
}
/* values */
dd {
  display: inline-block;
  position: relative;
  top: -48px;
  line-height: 48px;
  border-bottom: 1px solid;
  font-size: 32px;
}
/* connector */
dd::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  right: 50%;
  left: -999px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}
dd:nth-of-type(1)::after {
  height: 12px;
}
dd:nth-of-type(2)::after {
  height: 36px;
}
dd:nth-of-type(3)::after {
  height: 60px;
}

<dl>
  <dt>series</dt>
  <dd>A</dd>
  <dt>max-speed</dt>
  <dd>253</dd>
  <dt>batteries type</dt>
  <dd>QZ</dd>
</dl>

Ответ 4

JSFiddle.

Здесь реализация без использования <table>:

<style type="text/css">
.tbl {
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
    clear: both;
    border: #DDD solid 1px;
    border-collapse: collapse;
}

.col {
    display: table-cell;
    border: #DDD solid 1px;
    position: relative;
    border-collapse: collapse;
}

.col1 {
    font-size: 20px;
}

.row1 {
    font-size: 42px;
}

.border-bottom-green {
    border-bottom: green solid 1px;
}

.half-v-border {
    display: inline-block;
    width: 1px;
    height: 100%;
    background-color: #DDD;
    left: 50%;
    position: absolute;
    top: 0;
}

.half-h-border {
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #DDD;
    position: absolute;
    top: 50%;
}

.half-h-border.colored-bg,
.half-v-border.colored-bg {
    background-color: green;
    z-index: 1000;
}

.first-quarter-border {
    position: absolute;
    height: 50%;
    width: 50%;
    top: 0;
    left: 0;
    border-right: green solid 1px;
    border-bottom: green solid 1px;
}
</style>

<div class="tbl">
    <div class="row row1">
        <div class="col col1"></div>
        <div class="col col2 border-bottom-green">A</div>
        <div class="col col3"> - </div>
        <div class="col col4 border-bottom-green">253</div>
        <div class="col col5"> - </div>
        <div class="col col6 border-bottom-green">QZ</div>
    </div>
    <div class="row row2">
        <div class="col col1">series</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
    </div>
    <div class="row row3">
        <div class="col col1">max speed</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border colored-bg"></div>
            <div class="half-h-border"></div>
        </div>
    </div>
    <div class="row row3">
        <div class="col col1">batteries type</div>
        <div class="col col2">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col3">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col4">
            <div class="half-v-border"></div>
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col5">
            <div class="half-h-border colored-bg"></div>
        </div>
        <div class="col col6">
            <div class="half-v-border"></div>
            <div class="half-h-border"></div>
            <div class="first-quarter-border"></div>
        </div>
    </div>
</div>
<!-- .tbl -->