在HTML和CSS中相交水平线和垂直线
在HTML和CSS中相交水平线和垂直线
提问于 2018-08-03 07:12:00
我已经开始使用超文本标记语言和层叠样式表创建OrgChart。我遇到的一个问题是在<tr>和<td>元素之间创建一个相交的图表流水线。
我创建了容器、垂直线和水平线的定义，并将它们包装到`和标签中。控件中的垂直线可以正常工作。我为水平线创建了第二个，使其与垂直线在中间相交。然而，这条线仍然处于底部。
我已经在我的帖子中添加了CSS和HTML，希望你们中的一位可以帮助我解决我做错了什么。
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: auto;
}
tr {
border: none;
}
th,
td {
border-collapse: collapse;
border: 1px solid black;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100;
}
div.container {
width: 40px;
}
div.vertical-line {
border-left: 1px solid red;
height: 55px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
div.horizontal-line {
border-bottom: 1px solid red;
height: 1px;
margin-top: auto;
margin-bottom: auto;
width: 40px;
}<table>
<tr>
<td style="background-color: goldenrod" colspan="3">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
<tr>
<td style="width: 42.5%; background-color: wheat">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
<td style="width: 15%">
<div class="container">
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
<td style="width: 42.5%">
<div style="background-color:#CCFFCC">Dept
</br>
<b>EmpName</b>
<div style="border-bottom: 1px solid">
</div>
<div style="background-color:#CCFFFF">Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51663302
复制相关文章
相似问题