HTML tabe проведите линию между 2 tds

Question

У меня есть требование с базовыми c HTML и css. Я хочу создать строку таблицы и td динамически, и я хочу провести линию между td, как показано ниже. в примере pi c есть 4 td, соединенных линией.

любезно может кто-нибудь помочь мне, как это сделать

Answer 1

Используйте div и css для содержимого диапазона, например:

.hexagon {
  position: relative;
  height: 50px;
  width: 45px;
  background: black;
  display:inline-block;
  cursor:pointer;
}
.hexagon:before {
  position: absolute;
  content: '';
}
.hexagon:before {
  top: 4px;  /* border width */
  left: 4px;  /* border width */
  height: calc(100% - 8px);  /* 100% - (2 * border width) */
  width: calc(100% - 8px);  /* 100% - (2 * border width) */
  background: white;
}
.hexagon, .hexagon:before {
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon div{
  font-weight:bold;
  position: relative;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
}
.interval{
  display:inline-block;
  position: relative;
  width:30px;
  height:4px;
  top:8px;
  background-color:black;
  margin:-4px;
}

   <div class="hexagon"><div>1</div></div>
   <div class="interval"></div>
   <div class="hexagon"><div>2</div></div>
   <div class="interval"></div>
   <div class="hexagon"><div>3</div></div>
   <div class="interval"></div>
   <div class="hexagon"><div>4</div></div>