原生table实现固定列

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th class="fixed fixed-left">fixed left</th>
                    <th>head 1</th>
                    <th>head 2</th>
                    <th>head 3</th>
                    <th class="fixed fixed-right">fixed right</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td class="fixed fixed-left">body left</td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td class="fixed fixed-right">body right</td>
                </tr>

                <tr>
                    <td class="fixed fixed-left">body left</td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td class="fixed fixed-right">body right</td>
                </tr>

                <tr>
                    <td class="fixed fixed-left">body left</td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </td>
                    <td class="fixed fixed-right">body right</td>
                </tr>
            </tbody>
        </table>
    </div>

.table-container {
    overflow-x: auto;
    border: 1px solid black;
    margin: 50px;
    table {
        width: max-content;
        border-spacing: 0;
        tr:nth-last-of-type(1) {
            td {
                border-bottom: none;
            }
        }
        tr {
            th:nth-of-type(1),
            td:nth-of-type(1) {
                border-left: none;
            }
        }
        th,
        td {
            padding: 10px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }
        th:nth-last-of-type(2),
        td:nth-last-of-type(2) {
            border-right: 1px solid black;
        }
        th.fixed,
        td.fixed {
            position: sticky;
            z-index: 1;
            background-color: #f5f5f5;
        }
        .fixed-left {
            left: 0;
        }
        .fixed-right {
            right: 0;
            border-left: none;
        }
        .fixed::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 30px;
            pointer-events: none;
        }
        .fixed-left:after {
            right: 0;
            transform: translateX(100%);
            box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
        }
        .fixed-right:after {
            left: 0;
            transform: translateX(-100%);
            box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
        }
    }
}