Html 如何在网页中绘制线条？

我打算在标记分组行的HTML表中添加一些行。见下图。 有可能在表中画出那些蓝线吗？谢谢

---

此输出是否符合要求

检入输出

---

如上所述更新您的css使用以下css，您将得到您的结果：

td[rowspan] {
  position: relative;
}

td[rowspan]:before {
  content: '';
  height: 80%;
  width: 20%;
  border: 2px solid blue;
  border-right: none;
  position: absolute;
  top: 10%;
  right: 10px;
}

以下是指向jsbin的链接： 您可以根据自己的需要定制一些值。

试试这个

.td行{
位置：相对位置；
}
.td线路：之前{
内容：''；
显示：块；
宽度：20px；
身高：73%；
位置：绝对位置；
右：10px；
最高：13%；
边框顶部：纯色1px蓝色；
边框底部：纯色1px蓝色；
左边框：实心1px蓝色；
}

无标题文件

在我的第一个想象中，你可以作为一个

div来玩把戏，并为顶部、左侧和底部设置边框。和我的想法一样。但是请让它更通用一些，因为行跨度的数量可以不同。@ManhLe我不明白ru说的是什么？我的意思是
height:50px
在不同的情况下并不总是好看的。行跨度越高（ex>=6），则
td
的边界空白越大。如果我们可以设置相对于
td
height的边框高度，效果会更好。
    .border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}

td[rowspan] {
  position: relative;
}

td[rowspan]:before {
  content: '';
  height: 80%;
  width: 20%;
  border: 2px solid blue;
  border-right: none;
  position: absolute;
  top: 10%;
  right: 10px;
}