Complex table layout with CSS - html

Question

I created table with ul lists and styled as table with CSS display:table
The problem is that my table rows should be draggable and grouped in some parts which affects on list behavior like table. Here is my Code http://jsfiddle.net/frontDev111/38pvx9bn/1/
So In my code dd-list is table, dd-itemis table-row and dd-handle is table-cell. It works fine when I have only one table, but I need to have nested tables to make some part of row draggable (e.g from 1.draggable entire row, 2.draggable only right part of row) . So I set dd-list in dd-list in each row. This affects on behavior like table, and table-cell become independent from each other.
So, what can you advise to get table in table but keep table-cell's dependence from each other?
.dd-list {
display: table ;
vertical-align: middle;
width: 100%;
margin: 0 auto;
padding: 0;
}
.dd-item {
list-style: decimal;
display: table-row ;
vertical-align: middle;
}
.dd-item, .dd-empty, .dd-placeholder {
position: relative ;
padding: 0;
margin: 0;
min-height: 20px ;
}
.dd-handle {
display: table-cell ;
vertical-align: top;
margin: 5px 0 ;
padding: 10px;
text-decoration: none ;
font-weight: bold ;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
box-sizing: border-box;
}
.dd-container, .btn-gray {
border-left: 1px solid #dddddd;
}
<ol ui-tree-nodes="" class="dd-list dd-container ng-scope">
<li class="dd-item">
<div class="dd-handle dd-head">-</div>
<div class="dd-handle dd-head">1.draggable dfdfd</div>
<ol class="dd-list">
<li class="dd-item">
<div class="dd-handle dd-head">2.draggable</div>
<div class="dd-handle dd-head">bbb</div>
<div class="dd-handle dd-head">ccc</div>
<div class="dd-handle dd-head">ddd</div>
<div class="dd-handle dd-head">gg</div>
<div class="dd-handle dd-head">ggg</div>
</li>
</ol>
</li>
<li class="dd-item ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes" ng-repeat="employee in employees" ui-tree-nodes="" ng-model="employees" data-type="employee">
<div class="dd-handle ng-binding">1</div>
<div class="dd-handle">
<edit-in-place id="1" value="employee.name" class="ng-isolate-scope edit-in-place"><span ng-click="edit()" ng-bind="value" class="ng-binding">test</span>
</edit-in-place>
</div>
<ol class="dd-list ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes" ui-tree-nodes="" ng-model="employee.contracts" data-type="contract">
<li class="dd-item ng-scope angular-ui-tree-node" ng-repeat="contract in employee.contracts" ui-tree-node="" collapsed="false">
<div class="dd-handle">
<edit-in-place value="contract.client_name" class="ng-isolate-scope edit-in-place"><span ng-click="edit()" ng-bind="value" class="ng-binding">fghfghfghfgh</span>
</edit-in-place>
</div>
<div class="dd-handle"> sdfsdgdfg</div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
</li>
<li class="dd-item ng-scope angular-ui-tree-node" ng-repeat="contract in employee.contracts" ui-tree-node="" collapsed="false">
<div class="dd-handle">
<edit-in-place value="contract.client_name" class="ng-isolate-scope edit-in-place"><span ng-click="edit()" ng-bind="value" class="ng-binding">test</span>
</edit-in-place>
</div>
<div class="dd-handle"> sdfsdgdfg</div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
<div class="dd-handle"> </div>
</li>
</ol>
</li>
</ol>

Answer 1

Please have a look at the following markup:
<div class="wrapper">
<article class="main" >My awesome content here </article>
<footer class="footer">Some informations here </footer>
<header class="header">My site title goes here </header>
<aside class="sidebar">Here is my side content </aside>
<aside class="annexe" >Some more side content </aside>
</div>
Now the CSS. Pay attention to the number of lines:
.wrapper {
display: grid;
grid-columns: 200px 15px 1fr 15px 100px;
grid-rows: (auto 15px)[2] auto;
}
.header, .footer { grid-column-span: 5; }
.sidebar,
.main,
.annexe { grid-row: 3; }
.header { grid-row: 1; }
.footer { grid-row: 5; }
.sidebar { grid-column: 1; }
.main { grid-column: 3; }
.annexe { grid-column: 5; }
Done. 10 lines. No float. No inline-block. No height. No width. No margin. And if you want to make everything nice on small devices.
Note: I won’t explain the syntax. If you want to understand how works the Grid Layout, please have a look at: CSS-Tricks