oda-framework/components/layouts/divider/index-table.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<script type="module" src="../../../oda.js"></script>
<script type="module" src="./divider.js"></script>
<style>
    html * {
        color: gray;
        font-family: Arial;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .wrapper {
        display: flex;
        flex: 1;
        width: calc(100% - 16px);
        height: 100%;
        border: 1px solid gray;
        margin: 8px;

    }
    .aside {
        position: sticky;
        width: 200px;
        height: 100%;
        background-color: #e7e7e7;
    }
    .panel-left, .panel-right, .panel-main {
        display: flex;
        z-index: 1;
        overflow: hidden;
    }
    .panel-main {
        width: 100%;
        flex: 1;
    }
    .panel-left {
        width: 300px;
        background-color: #f0f0f0;
        position: sticky;
        left: 0;
    }
    .panel-right {
        width: 300px;
        background-color: #f0f0f0;
        position: sticky;
        right: 0;
    }
    header {
        display: flex;
        border-bottom: 1px solid gray;
        align-items: center;
        min-width: 100%;
        height: 32px;
        background-color: #d0d0d0;
        z-index: 1;
    }
    .cell {
        min-width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100px;
        text-align: center;
    }
    .cell:last-child {
        flex: 1;
    }
</style>

<div class="wrapper">
    <aside class="panel-left">
        <header>
            <div style="display: flex">
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell flex">Col</div>
            </div>
        </header>
    </aside>
    <oda-divider color="gray" use_px min="2" max="480" style="max-width: 1px;"></oda-divider>
    <main class="panel-main ">
        <header>
            <div style="display: flex">
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell flex">Col</div>
            </div>
        </header>
    </main>
    <oda-divider color="gray" use_px use_px min="2" max="480" reverse style="max-width: 1px;"></oda-divider>
    <aside class="panel-right">
        <header>
            <div style="display: flex">
                <div class="cell">Col</div>
                <oda-divider color="gray" use_px></oda-divider>
                <div class="cell flex">Col</div>
            </div>
        </header>
    </aside>
</div>