冻结同时使用水平和垂直滚动而不使用JavaScript的超文本标记语言表格的前两列和最后一列

<style>
    .table-container {
        width: 100%;
        height: 300px;
        overflow: auto;
    }
    
    table {
        width: 100%;
        table-layout: fixed;
    }
    
    th,
    td {
        padding: 10px;
        border: 1px solid #ccc;
    }
    
    th:first-child,
    td:first-child,
    th:last-child,
    td:last-child {
        position: sticky;
        background-color: #f5f5f5;
        z-index: 1;
    }
    
    th:first-child,
    td:first-child {
        left: 0;
    }
    
    th:last-child,
    td:last-child {
        right: 0;
    }
</style>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <!-- 其他行数据 -->
        </tbody>
    </table>
</div>