Как добавить строки для таблицы tr как Tree - PullRequest
Новая
       1

Как добавить строки для таблицы tr как Tree

0 голосов
/ 04 июля 2018

Как можно сделать боковые линии для каждой таблицы 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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif&quot;);">&nbsp;</div>
  </td>
  <td width="16px" style="display: none;">
    <div class="dhx_bg_img_fix" style="background-image: url(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif&quot;); width: 18px; height: 18px;">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif&quot;);">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/minus.gif&quot;);">&nbsp;</div>
          </td>
          <td width="16px" style="display: none;">
            <div class="dhx_bg_img_fix" style="background-image: url(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif&quot;); width: 18px; height: 18px;">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/folderOpen.gif&quot;);">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif&quot;);">&nbsp;</div>
                  </td>
                  <td width="16px">
                    <div class="dhx_bg_img_fix" style="background-image: url(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif&quot;); width: 18px; height: 18px;">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif&quot;);">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/blank.gif&quot;);">&nbsp;</div>
                  </td>
                  <td width="16px">
                    <div class="dhx_bg_img_fix" style="background-image: url(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/iconUncheckAll.gif&quot;); width: 18px; height: 18px;">&nbsp;</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(&quot;http://localhost:48081/Airtel_BMS_V4/TreeMenu/imgs/csh_red/leaf.gif&quot;);">&nbsp;</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;
}

Пожалуйста, проверьте ссылку выше.

Привязка дизайна Древовидная структура:

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Это простой пример, который вы хотите достичь, но это делается с помощью списка. Я никогда не видел, сделано с таблицами. Зачем? Потому что вы не можете контролировать пространство между элементами так же эффективно, как в списке, а также потому, что таблицы предназначены только для отображения табличных данных.

Я редактирую код и добавляю иконки со шрифтом-удивительным, чтобы быть более реалистичным с вашим дизайном.

Надеюсь, поможет 

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>
0 голосов
/ 04 июля 2018

Обычно граница не применяется к границе таблицы. Вам нужно добавить к таблице border-collapse. Вы можете использовать приведенный ниже код. Технические характеристики 

table {
    border-collapse: collapse;
}

table tr
{
    border-left:1px solid black;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...