使用 CSS 的复杂表格布局

Question

我使用 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">&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