listview表格左側(cè)表列多列鎖定，不隨著滾動(dòng)條滾動(dòng)

<div class="table-box">
    <div class="table-head">
        <div class="table-row">
            <div class="table-cell">列1</div>
            <div class="table-cell">列2</div>
            <div class="table-cell">列3</div>
            <div class="table-cell">列4</div>
            <div class="table-cell">列5</div>
            <div class="table-cell">列6</div>
        </div>
    </div>
    <div class="table-body">
        <div class="table-row">
            <div class="table-cell">內(nèi)容1</div>
            <div class="table-cell">內(nèi)容2</div>
            <div class="table-cell">內(nèi)容3</div>
            <div class="table-cell">內(nèi)容4</div>
            <div class="table-cell">內(nèi)容5</div>
            <div class="table-cell">內(nèi)容6</div>
        </div>
        <div class="table-row">
            <div class="table-cell">內(nèi)容1</div>
            <div class="table-cell">內(nèi)容2</div>
            <div class="table-cell">內(nèi)容3</div>
            <div class="table-cell">內(nèi)容4</div>
            <div class="table-cell">內(nèi)容5</div>
            <div class="table-cell">內(nèi)容6</div>
        </div>
        <div class="table-row">
            <div class="table-cell">內(nèi)容1</div>
            <div class="table-cell">內(nèi)容2</div>
            <div class="table-cell">內(nèi)容3</div>
            <div class="table-cell">內(nèi)容4</div>
            <div class="table-cell">內(nèi)容5</div>
            <div class="table-cell">內(nèi)容6</div>
        </div>
    </div>
</div>
<style>
    .table-box {
        width: 600px;
        height: 300px;
        overflow-x: auto;
    }
    .table-head, .table-body {
        display: flex;
    }
    .table-row {
        display: flex;
        flex-direction: row;
    }
    .table-cell {
        flex: 1;
        border: 1px solid #ccc;
    }
    .table-head .table-cell:nth-child(-n+2),
    .table-body .table-cell:nth-child(-n+2) {
        position: relative;
    }
    .table-head .table-cell:nth-child(-n+2):after,
    .table-body .table-cell:nth-child(-n+2):after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: #ccc;
    }
</style>