tabelizer.css

table.controller{border-collapse: collapse;padding:0px;font-family:'Open Sans';font-size:14px;font: 14px/24px 'Roboto', sans-serif;}
table.controller .control{font:14px 'Open Sans';}
table.controller td{padding:0px;border:0px solid red;}

/*Update the height of the line per your needs*/
table.controller .line{position:relative;height:24px;width:15px;float:left;}
table.controller .line .vert{width:1px; height:100%;}
table.controller .line .horz{position:absolute;top:50%;width:10px;height:1px;}

/*Change the colors to match your color scheme*/
table.controller .line.level1 .vert {background-color:#FF2A02;}
table.controller .line.level1 .horz {background-color:#FF2A02;}
table.controller .line.level2 .vert{background-color:#2BC6CC;} 
table.controller .line.level2 .horz{background-color:#2BC6CC;}
table.controller .line.level3 .vert{background-color:#098EE7;}
table.controller .line.level3 .horz{background-color:#098EE7;}

table.controller tr.hidden{display:none;}

table.controller .expander{margin-right:10px;}

table.controller .l1 .control{width:10px;min-height:100%}
table.controller .l2 .control{width:30px;min-height:100%}
table.controller .l3 .control{width:60px;min-height:100%}
table.controller .l4 .control{width:90px;min-height:100%}

table.controller .l1.contracted .control .line.level1{display:none;}
table.controller .l2.contracted .control .line.level2{display:none;}
table.controller .l3.contracted .control .line.level3{display:none;}

table.controller .l4 .expander{display:none;}

table.controller .label {margin-right:30px;}
table.controller td.data {text-align:center;min-width:90px;}

table.controller .control, table.controller .expander, table.controller .label{float:left;}
table.controller .contracted .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABMUlEQVQ4ja2VPUvDUBSG3zctBAMOuuvm5Ogg+iN0spOLKAgdHNss6T00HdwCXXXSQcGlf0E3waHYRX9GQFMRLsfBBuJHaJLm2c7Hfc653OESGYwxNyQ3rLVHYRhOUAEnG5DcVNWtRqPxKCInCwtTVHVJVS9EZOT7/srCwox433XdcRAEO7UIZ6w7jvPQ6/W6AFiHEACaJM+NMSMRWa1DmLIHYCwiu3UJoaprqnov3/w5X1o4o6mqBsBtp9NZ/lGoKAQAqOqB53mfAA7TXNUNszi5QVlI3iVJcprNVboyyXcAbRG5+l0rLSQ5AdASkZf/6mWFwziO/SiKpnkNRYVvqtru9/vX8xqLCJ+tta3BYPBaZPK8Vx6S3C4qA3I2JDkFcCYil0VFecInkh/W2uOqX8AXLgNp5aJbT/cAAAAASUVORK5CYII=);}
table.controller .expanded .expander {width:10px;height:20px;background-position:0px 5px; background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTRGQzMxRDlGQzExMUUzODBEOEVDQTdCODg2NDBDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRTRGQzMxRTlGQzExMUUzODBEOEVDQTdCODg2NDBDNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNEZDMzFCOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVFNEZDMzFDOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+I8q8PAAAAQxJREFUeNpi/P//PwM1ARMDlQHVDWRpbGycB6RNqGEYMPiusgBpHSBDlxoGMjIy/mL6+/dvMpDxnQqGfQealcjU3Nx8GcjPo4ID80BmMcJ49fX1E8k1GOi6jQ0NDQEosQwULAdSl8gw79GPHz8SMZIN0IYfwDAIAzK/kGDYn3///kV0dHS8x5oOW1pabgJjPIuEZFIDDLfjKN7HppDI8NwETMOgcPtPMKd8+vSpAhiml/FEwmMgTkQ3DKeB/f39oHQZBtT0FVu4AXEEMMzfkZSXgRpuAKksLK5rBcodI6twAGpcBDRgNZJhIHYT3sKBUEx++/YtmYuLC+TNf0B2ZldX1z+8iXzkFbAAAQYATlZraA/C4aUAAAAASUVORK5CYII=);}
table.controller .childless .expander {display:none;}

table.controller .control .line.level1 .horz{display:none;}
table.controller .l1-first .control .line.level1 .horz{display:block;}
table.controller .l1-last .control .line.level1 .horz{display:block;width:10px; height:1px;}
table.controller .l1-first .control .line.level1 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .vert{width:1px; height:50%;}
table.controller .l1-last .control .line.level1 .horz{}

table.controller .control .line.level2 .horz{display:none;}
table.controller .l2-first .control .line.level2 .horz{display:block;}
table.controller .l2-last .control .line.level2 .horz{display:block;width:10px; height:1px;}
table.controller .l2-first .control .line.level2 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l2-last .control .line.level2 .vert{width:1px; height:50%;}

table.controller .control .line.level3 .horz{display:none;}
table.controller .l3-first .control .line.level3 .horz{display:block;}
table.controller .l3-last .control .line.level3 .horz{display:block;width:10px; height:1px;}
table.controller .l3-first .control .line.level3 .vert{bottom:0px;position:absolute;width:1px; height:50%;}
table.controller .l3-last .control .line.level3 .vert{width:1px; height:50%;}