Horizontal tree table, organization structure-2

horizontal-tree-table-organization-structure-2.markdown

Horizontal tree table, organization structure-2

A Pen by Beibit Sakhanov on CodePen.

License.

index.html

<ul class="treeCSS">
  <li><b>Руководитель</b>
    <ul>
      <li>1-й Заместитель руководителя
        <ul>
          <li>Директор </br>1-го департамента
                    <ul>
          <li>начальник </br>1-го отдела
          <li>начальник </br>2-го отдела
          <li>начальник </br>3-го отдела
        </ul>
          <li>Директор </br>2-го департамента
          <li>Директор </br>3-го департамента
        </ul>
      <li>2-й Заместитель </br>руководителя
        <ul>
          <li>Директор </br>1-го департамента
                    <ul>
          <li>начальник </br>1-го отдела
          <li>начальник </br>2-го отдела
          <li>начальник </br>3-го отдела
        </ul>
          <li>Директор </br>2-го департамента
          <li>Директор </br>3-го департамента
        </ul>
    </ul>
</ul>

style.css

.treeCSS, 
.treeCSS ul,
.treeCSS li {
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
.treeCSS ul {
  margin: 0 0 0 .5em; /* вести линию вниз где-то с полбуквы родителя */
}
.treeCSS > li:not(:only-child),
.treeCSS li li {
  position: relative;
  padding: .2em 0 0 1.2em; /* отступ до текста; для раскрывающегося списка в ряде случаев (в Хроме есть баг) padding-top (.2em) лучше указывать в px */
}
.treeCSS li:not(:last-child) {
  border-left: 1px solid #ccc; /* толщина, цвет и стиль (вместо сплошной пунктирная или точечная) вертикальной линии */
}
.treeCSS li li:before,
.treeCSS > li:not(:only-child):before { /* горизонтальная линия */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em; /* не более отступа до текста (1.2em) */
  height: .7em; /* начинается приблизительно с половины высоты буквы (.5em + .2em) */
  border-bottom: 1px solid #ccc;
}
.treeCSS li:last-child:before { /* вертикальная линия последнего пункта в каждом списке */
  width: calc(1.1em - 1px); /* для перфекционистов */
  border-left: 1px solid #ccc;
}