html - 固定标题表在调整窗口大小时变形

当水平调整窗口大小时，此固定标题表会变形列。有办法阻止吗？

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }
        table th {
            border-left: 1px solid blue;
        }
        table th,
        table td {
            padding: 5px;
            text-align: left;
            border-left:1px solid blue;
        }

        table th, table td {
            width: 150px;
        }
        table thead tr {
            display: block;
            position: relative;
        }
        table tbody {
            display: block;
            overflow: auto;
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>pick_up_location</th>
                <th>destination</th>
                <th>instruction</th>
                <th>created_at</th>
                <th>status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12322</td>
                <td>Whanga Road</td>
                <td>Crescent Street</td>
                <td>Call when arrive</td>
                <td>123442342331</td>
                <td>comming</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

请记住这个固定标题表。意思是当你有 100 行时。您可以滚动该行，但标题位置是固定的。无法删除显示 block 属性。

更新:

使用 Mark answer，表格看起来不错，但在小屏幕上仍然变形。截图