html - 使用 CSS 进行复杂的表格布局

Question

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

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

所以在我的代码中，dd-list 是表，dd-item 是表行，dd-handle 是表-细胞。当我只有一个表时它工作正常，但我需要嵌套表以使行的某些部分可拖动(例如从 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 行。没有 float 。没有内联 block 。没有高度。没有宽度。没有 margin 。如果你想让小型设备上的一切都很好。

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