html表格固定表头问题

html表格固定表头问题
向下滚动时固定表头，使用的是 position: sticky;

问题：滚动时表头是固定了,但是表头的上下边框线没有固定,怎么样才能让它上下边框线固定住。

用了border-collapse: collapse导致边框塌陷，参考下下面的文章

https://ask.csdn.net/questions/7835949


<style>
    .table {
        width: 100%;
        border-collapse: collapse;
        overflow: auto;
    }

    .table thead {
        position: sticky;
        top: 0;
        background-color: white;
        border-bottom: 1px solid #ddd;
    }

    .table td,
    .table th {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
</style>

<table class="table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Table body goes here -->
    </tbody>
</table>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632