如何为表格tr添加行，例如Tree
如何像树形结构那样为每个表tr 设置边线？
此外，嵌套表将出现在 tr 中。
示例代码 Fiddle Link ：
#smsTree {
margin-top: 30px;
}
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:not(:last-child) + #smsTree tr:not(:first-child) {
content: "";
position: absolute;
left: 35px;
z-index: 100;
width: 20px;
height: 100px;
border-bottom: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}<div id="smsTree">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)" style="text-decoration: none;"><strong>1mnthuser [Content Provider]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif");"> </div>
</td>
<td width="16px" style="display: none;">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlack" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>BMS_MKT_608[Market Plan]<strong></strong></strong></font></span></td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td> </td>
<td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td class="standartTreeImage">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 18px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif");"> </div>
</td>
<td width="16px">
<div class="dhx_bg_img_fix" style="background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif"); width: 18px; height: 18px;"> </div>
</td>
<td class="standartTreeImage" style="width: 16px;">
<div class="dhx_bg_img_fix" style="padding: 0px; margin: 0px; width: 16px; height: 16px; background-image: url("http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif");"> </div>
</td>
<td class="dhxTextCell standartTreeRow" nowrap="" style="font-size: 10pt; cursor: pointer;"><span class="standartTreeRow" style="padding-left: 5px; padding-right: 5px;"><font class="tdSmallBlue" onclick="return anchor_onclick(this)" onmouseover="return link_mouseover(this)" onmouseout="return link_mouseout(this)"><strong>sss<strong></strong></strong></font></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
css：
#smsTree tr:not(:last-child) {
border-left: 1px solid #ccc;
}
#smsTree tr:first-child:before {
border-bottom: none;
}
#smsTree tr:before {
content: "";
position: absolute;
left: 20px;
z-index: 100;
width: 20px;
height: 10%;
border-bottom: 1px solid #ccc;
}
#smsTree tr:last-child:before {
border-left: 1px solid #ccc;
}
请检查上方的小提琴链接。
设计树结构的快照：
2 个答案:
答案 0 :(得分：1)
通常边框不适用于表格边框。您需要向表格添加边框折叠。您可以使用以下代码。 specifications
table {
border-collapse: collapse;
}
table tr
{
border-left:1px solid black;
}
答案 1 :(得分：1)
这是您想要实现的一个简单示例，但是它是通过列表完成的。我从来没有看过桌子。为什么？因为您不能像列表那样有效地控制元素之间的空间，而且还因为表仅用于显示表格数据。
我编辑了代码，并添加了字体真棒的图标，以使您的设计更加逼真。
希望对您有帮助
ul {
border-left: 1px dotted;
list-style: none;
padding-left: 12px;
}
li {
position: relative;
padding-left: 22px;
}
li::before {
background-color: #fff;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -12px;
top: 10px;
border-top: 1px dotted;
}
ul.tree > li:first-child::before {
width: 11px;
height: 10px;
left: -13px;
top: 0px;
border: 0;
border-bottom: 1px dotted;
}
li:last-child::before {
width: 11px;
height: 10px;
left: -13px;
}
ul.tree>li::after,
ul.tree>li>ul>li::after {
background-color: red;
content: '';
height: 10px;
width: 10px;
position: absolute;
left: -18px;
top: 6px;
z-index: 1;
}
ul.tree>li.open::after,
ul.tree>li>ul>li.open::after {
background-color: blue;
}
li ul {
margin: 5px 7px;
}
li i {
margin-right: 5px;
position: absolute;
top: 2px;
left: 2px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<ul class="tree">
<li class="open"><i class="fas fa-address-book"></i>06_midh_http_user
<ul>
<li class="open"><i class="fas fa-address-book"></i>BMS_MKT_303
<ul>
<li><i class="fas fa-address-book"></i>6d</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_304</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_305</li>
<li><i class="fas fa-address-book"></i>MS_MKT_307</li>
<li><i class="fas fa-address-book"></i>BMS_MKT_308</li>
</ul>
</li>
<li><i class="fas fa-address-book"></i>1111</li>
<li><i class="fas fa-address-book"></i>1112</li>
</ul>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？