HTMLのform内にスクロール可能なtableを配置したい

tableの各行にチェックボックスを持つ、スクロール可能なtableがあります。
チェックボックスの値をバックエンドに送信したいため、table全体をformで囲んでみたのですが、そうすると#scrollable-tableに設定したスクロール用のCSS（overflow）が無効になってしまいます。
（HTMLは要素やclass名など変更し、必要な部分のみ記載しています。）

html
1<form action=updated method="POST">
2    {% csrf_token %}
3    <input type="submit" value="保存" id="update-button">
4    <div id="scrollable-table">
5        <table>
6            <thead>
7                <tr>
8                    <th>checkbox</th>
9                </tr>
10            </thead>
11            <tbody>
12                <tr>
13                    <td>{{ form.flag }}</td>
14                </tr>
15            </tbody>
16        </table>
17    </div>
18</form>

tableの中にformを入れてみたのですが、当然ボタンまでスクロールされてしまい、それは期待していません。ボタンはtableの上に配置し、位置は固定したいです。

html
1<div id="scrollable-table">
2    <table>
3        <form action=updated method="POST">
4            {% csrf_token %}
5            <input type="submit" value="保存" id="update-button">
6            <thead>
7                <tr>
8                    <th>checkbox</th>
9                </tr>
10            </thead>
11            <tbody>
12                <tr>
13                    <td>{{ form.flag }}</td>
14                </tr>
15            </tbody>
16        </form>
17    </table>
18</div>