使用CSS的复杂表格布局

Question

我用ul列表创建了表格，并用CSS display:table设置了表格的样式。

问题是，我的表行应该是可拖动的，并在某些部分分组，这会影响类似于表的列表行为。这是我的代码http://jsfiddle.net/frontDev111/38pvx9bn/1/

所以在我的代码中，dd-list是table，dd-item是table-row，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行。没有浮动。没有内联块。没有身高。没有宽度。没有利润。如果你想在小型设备上让一切变得美好。

注意:我不会解释语法。如果您想了解网格布局是如何工作的，请查看：CSS-Tricks