html - css - 组织结构图 - 垂直线在某些情况下不合适

Question

我正在使用以下插件。 https://github.com/dabeng/OrgChart。

在某些分辨率下，垂直线不合适。 https://github.com/dabeng/OrgChart/issues/410

我已经分析了呈现的 html 并尝试使用相同的代码。对于某些分辨率，我遇到了同样的问题。

请看下面的提琴手。

.downline{
  height:30px;
  width:2px;
  background:red;
  text-align:center;
  background: red;
    text-align: center;
    background-color: rgba(217, 83, 79, 0.8);
    margin: 0px auto;
    height: 55px;
    width: 2px;
    float: none;
}


.leftLine{
  border-right:1px solid green;
}
.rightLine{
  border-left:1px solid green;
}
table{
 margin:50px;
     border-spacing: 0 !important;
    border-collapse: separate !important;
}

.item{
  padding:5px;
  border:1px solid black;
}

<table>

<tr>
  <td colspan="2">
    <div class="downline">
    
    </div>
  </td>
</tr>
<tr>
 <td class="leftLine">
 &nbsp;
 </td>
 <td class="rightLine">
   &nbsp;
 </td>
</tr>
<tr>
 <td colspan="2" >
   <div class="item">
   Test 123
   
   </div>
 </td>
 
</tr>
</table>

标签： htmlcss