комплекс стол макет с CSS

Question

Я создал таблицу с ul списками и стиль в виде таблицы с помощью CSS display:table

Проблема заключается в том, что мои строки таблицы должны быть сгруппированы dragable и в некоторых частях, что влияет на поведение списка, как таблицы. Вот мой код http://jsfiddle.net/frontDev111/38pvx9bn/1/

Так в моем коде dd-list это таблица, dd-item столовых рядов и dd-handle является table-cell. Он отлично работает, когда у меня есть только одна таблица, но мне нужно иметь вложенные таблицы, чтобы сделать какую-то часть перетаскиваемой строки (например, от 1.draggable всей строки, 2.draggable только правая часть строки). Поэтому я установил dd-list в dd-list в каждой строке. Это влияет на поведение, подобное таблице, и table-cell становятся независимыми друг от друга.

Итак, что вы можете посоветовать получить таблицу в таблице, но сохранить зависимость табличной ячейки друг от друга?

.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">&nbsp; sdfsdgdfg</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</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">&nbsp; sdfsdgdfg</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
        <div class="dd-handle">&nbsp;</div> 
 
       </li> 
 
     
 
      </ol> 
 
     </li> 
 
    </ol> 
 

 

Answer 1

Пожалуйста, обратите внимание на следующую разметку:

<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> 

теперь CSS. Обратите внимание на количество линий:

.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; } 

Выполнено. 10 строк. Без поплавка. Нет встроенного блока. Нет высоты. Нет ширины. Без поля. И если вы хотите сделать все хорошо на небольших устройствах.

Примечание: я не буду объяснять синтаксис. Если вы хотите понять, как работает Grid Layout, пожалуйста, взгляните на: CSS-Tricks