1. Data Table의 Style을 bootloader의 black table theme 형태 적용
index.html에서 table에 class 추가
table-dark : dark theme
table-striped : 짝수, 홀수 line bgcolor 변경
table-hover : Mouse hover시 색 변경

<table id="Elements" class="table table-dark table-striped table-hover" cellspacing="0" width="100%">
</table>

2.Data Table에 table-striped설정시 even에만 color 설정이 적용되지 않음.
문제 화면

3.even row에 css에 color설정 추가. 기존 bootstrap에서 설정 한 background-color를 overwrite하기 위해 !important추가 함

tr.even {
    background-color: #202020!important;
}

4.기타 child item은 odd, even에 따라 color 구분하고, mouse hover시 color로 변경
tr tag안에 class에 even + childitem class를 접근하기 위해 tr.even.childitem 으로 접근

tr.even.childitem{
    background-color: #303030!important;
}

tr.odd.childitem{
    background-color: #707070!important;
}

tr.even:hover {
    background-color: #505050!important;
}

tr.odd:hover {
    background-color: #505050!important;
}

5.child item open, close용 icon을 대신 codepen sample을 적용(https://codepen.io/murphyrandle/pen/wvCgI?q=open&limit=all&type=type-pens)

6.codepen에서 제공하는 scss는 css로 compile후에 source로 삽입

* {
  box-sizing: border-box;
}

html {
  background-color: #C9353B;
}

.open-close-button {
  display: inline-block;
 ...
}
.open-close-button:before {
...
  top: 47%;
}
.open-close-button:after {
}

7.open close는 class open만 추가하기에, index.js에 추가

$('#Elements tbody').on('click', 'td.details-control', function () {
        ...
        $(this).children('.open-close-button').toggleClass('open');
        ...
}

9.child item을 다시 show시 color 변경되는 css animation 추가

@keyframes example {
    from {background-color: initial;}
    to {background-color: #606060;}
}

tr.childitem{
    background-color: #606060!important;
    animation-name: example;
    animation-duration: 0.5s;
    animation-play-state: running;
}

10.최종 적용된 table