我创建了包含ul列表的表格，并使用CSS display:table
问题是我的表行应该是可拖动的并且在某些部分中分组，这会影响列表行为，例如表。这是我的代码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"> 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>
答案 0 :(得分：0)
请查看以下标记：
<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行。没有浮动。没有内联块。没有高度。没有宽度。没有保证金。如果你想在小型设备上做好一切。
注意：我不会解释语法。如果您想了解网格布局的工作原理，请查看：CSS-Tricks