带有colspan的Flexbox表（flex-grow）

Question

我正在使用flexbox创建一个庞大的数据表，我在使用flex-grow对齐“colspanned”的列时遇到问题。

为什么选择flexbox？

由于应用规范。我需要3个表，一个在另一个的顶部，每个表的固定<thead>固定在屏幕的顶部，直到我滚动通过表，然后修复第二个表的<thead>，等等... position: sticky;似乎是一个很好的解决方案，除了它不适用于表格 因此，flexbox。

问题

由于<thead>在1行中有3行和colspans，因此当<tbody>的所有列都使用flex-grow: 1;时，我可以相对轻松地调整布局。问题是当我想将第一列和最后一列设置为其他宽度时。

问题

如果我希望流程ID 列为flex-grow且状态消息列为{}，请如何将flex-grow: 2;设置为colspanned列？是flex-grow: 4;？ colspanned上面的行中的列总是会错过对齐...

Codepen链接：
使用flex-grow: 1;的工作示例
https://codepen.io/vedranjaic/full/gGJMEx/
（您可以点击表格标题中的按钮折叠菜单）

HTML     

<div class="container-fluid">
    <div class="content">

        <nav class="main-menu">
            <ul>
                <li><a href="#">Nav link 1</a></li>
                <li><a href="#">Nav link 2</a></li>
                <li><a href="#">Nav link 3</a></li>
            </ul>
        </nav>

        <div class="table-flex table-process-error">

            <div class="table-thead ">
                <div class="table-row table-header">
                    <div class="table-row-item">
                        <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Error processes</h3>
                    </div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item flex-grow-4">Context</div>
                    <div class="table-row-item flex-grow-4">Process Session</div>
                    <div class="table-row-item flex-grow-3">Execution</div>
                    <div class="table-row-item flex-grow-1">Info</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">Process ID</div>
                    <div class="table-row-item">Source</div>
                    <div class="table-row-item">Schedule</div>
                    <div class="table-row-item">Context</div>
                    <div class="table-row-item">Session ID</div>
                    <div class="table-row-item">Period From</div>
                    <div class="table-row-item">Period To</div>
                    <div class="table-row-item">Action</div>
                    <div class="table-row-item">Start</div>
                    <div class="table-row-item">End</div>
                    <div class="table-row-item">Duration</div>
                    <div class="table-row-item">Status message</div>
                </div>
                <!-- /.table-row -->
            </div>
            <!-- /.table-thead -->

            <div class="table-tbody">
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->

                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->

            </div>
            <!-- /.table-tbody -->

        </div>
        <!-- /.table-flex -->
        <div class="table-flex table-process-warning">

            <div class="table-thead ">
                <div class="table-row table-header">
                    <div class="table-row-item">
                        <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Warning processes</h3>
                    </div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item flex-grow-4">Context</div>
                    <div class="table-row-item flex-grow-4">Process Session</div>
                    <div class="table-row-item flex-grow-3">Execution</div>
                    <div class="table-row-item flex-grow-1">Info</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">Process ID</div>
                    <div class="table-row-item">Source</div>
                    <div class="table-row-item">Schedule</div>
                    <div class="table-row-item">Context</div>
                    <div class="table-row-item">Session ID</div>
                    <div class="table-row-item">Period From</div>
                    <div class="table-row-item">Period To</div>
                    <div class="table-row-item">Action</div>
                    <div class="table-row-item">Start</div>
                    <div class="table-row-item">End</div>
                    <div class="table-row-item">Duration</div>
                    <div class="table-row-item">Status message</div>
                </div>
                <!-- /.table-row -->
            </div>
            <!-- /.table-thead -->

            <div class="table-tbody">

                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->

            </div>
            <!-- /.table-tbody -->

        </div>
        <!-- /.table-flex -->
        <div class="table-flex table-process-running">

            <div class="table-thead ">
                <div class="table-row table-header">
                    <div class="table-row-item">
                        <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Running processes</h3>
                    </div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item flex-grow-4">Context</div>
                    <div class="table-row-item flex-grow-4">Process Session</div>
                    <div class="table-row-item flex-grow-3">Execution</div>
                    <div class="table-row-item flex-grow-1">Info</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">Process ID</div>
                    <div class="table-row-item">Source</div>
                    <div class="table-row-item">Schedule</div>
                    <div class="table-row-item">Context</div>
                    <div class="table-row-item">Session ID</div>
                    <div class="table-row-item">Period From</div>
                    <div class="table-row-item">Period To</div>
                    <div class="table-row-item">Action</div>
                    <div class="table-row-item">Start</div>
                    <div class="table-row-item">End</div>
                    <div class="table-row-item">Duration</div>
                    <div class="table-row-item">Status message</div>
                </div>
                <!-- /.table-row -->
            </div>
            <!-- /.table-thead -->

            <div class="table-tbody">

                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->
                <div class="table-row">
                    <div class="table-row-item">PROCID123</div>
                    <div class="table-row-item">N/A</div>
                    <div class="table-row-item">DAY</div>
                    <div class="table-row-item">DEV</div>
                    <div class="table-row-item">6</div>
                    <div class="table-row-item">27.9.2017</div>
                    <div class="table-row-item">28.9.2017</div>
                    <div class="table-row-item"><input type="checkbox"></div>
                    <div class="table-row-item">13.10.2017 00:00</div>
                    <div class="table-row-item">13.10.2017 01:58</div>
                    <div class="table-row-item">00:01:58</div>
                    <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
                </div>
                <!-- /.table-row -->

            </div>
            <!-- /.table-tbody -->

        </div>
        <!-- /.table-flex -->

    </div>
    <!-- /.content -->
</div>
<!-- /.container-fluid -->

SCSS

// Functions
@function grey($shade) {
  @if not map-has-key($grey, $shade) {
    @warn "Color #{$shade} not found in $grey map.";
  }
  @return map-get($grey, $shade);
}

// Colors
$grey: (
  lightest: #f6f6f6, 
  light: #dedede, 
  dark: #afafaf, 
  darkest: #777777
);
$white: #ffffff;

// Animations
@mixin transition {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

// Text overflow
%text-overflow {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // vertical-align: top;
}

// Main menu
.main-menu {
  position: fixed;
  overflow-y: auto;
  left: 0;
}

// Container
.content {
  @include transition;
  margin-left: 0;
  .main-menu-open & {
    margin-left: 300px;
  }
}

// Tables
.table-flex {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  border: 1px solid grey(dark);
}
.table-thead {
  position: sticky;
  top: 0;
  .table-row-item {
    background-color: grey(light);
  }
}
.table-row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.table-row-item {
  @extend %text-overflow;
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  background-color: grey(lightest);
  border-right: 2px solid $white;
  border-bottom: 2px solid $white;
  padding: 8px;

  // Flex grow
  @for $i from 1 through 6 {
    $grow: $i * 1;
    &.flex-grow-#{$i} {
      flex: $grow calc(100% / (12/#{$i}));
    }
  }
}

JS（菜单切换）

$('.main-menu-toggle').click(function(e) {
    $('body').toggleClass('main-menu-open');
    e.preventDefault();
})