Нарисуйте линию от одного элемента к другому

Question

Я хотел бы нарисовать линию, которую можно стилизовать, которая начинается с центральной позиции элемента <td> и заканчивается в центральной позиции другого элемента <td>.

---

Я уже пробовал использовать плагин jQuery Connections , но он соединяет края элементов, а не центральную позицию.

Этот плагин будет просто работать так:

$('#start').connections({
  to: '#end',
  'class': 'related'
});

Я хочу, чтобы это работало так же.(или аналогичным образом)

---

Также, когда я использую плагин jQuery Connections , линия соединителя, очевидно, не появляется.

Answer 1

Решением будет использование дополнительного элемента внутри вашего тд и использование отображения flex и выравнивания по центру, что-то вроде этого:

<div>
  1
  <span class="line"></span>
</div>

, а затем:

div {
 display: flex;
 align-items: center;
 width: 100%;
}
.line {
  border-bottom: 1px solid #000;
  width: 100%;
  display: inline-block;
}

Рабочий примерздесь, однако, вам нужно адаптировать его для ваших нужд, но он должен выполнять свою работу: https://codepen.io/anon/pen/ewWgpV