stickyでテーブルの一部固定をしたが、ページ全体が動いてしまう

cssの「sticky」を使用して、表の一部を固定するコードを書いています。
表自体は思った挙動になったのですが、表の可動部分と一緒に、表の前後にある通常コンテンツも横に動いてしまい、横スクロールバーが表示＆通常コンテンツの右側に空白地帯が表示されてしまいます。

「sticky」で固定したいセルを含む表以外に、「sticky」が干渉しない方法を教えて頂きたいと思います。

現状コード▼
html

<table class="pricetable">
<tr>
<td class="sticky">&nbsp;</td>
<td class="color">Aパターン</td>
<td class="color">Bパターン</td>
<td class="color">Cパターン</td>
</tr>
<tr>
<td class="sticky">金額</td>
<td>&yen;7,700</td>
<td>&yen;7,700</td>
<td>&yen;7,700</td>
</tr>
<tr>
<td class="sticky">仕様</td>
<td>デフォルト</td>
<td>デフォルト</td>
<td>デフォルト</td>
</tr>
<tr>
</table>

css

.pricetable {
    width: 100%;
    max-width: 700px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}
.pricetable,.pricetable tr,.pricetable tr td {
    border: solid 1px #DDD;
    border-collapse: collapse;
    display: block;
}
.pricetable tr td {
    padding: 15px;
    width: 17.5%;
    height: auto;
    white-space: nowrap;
}
.pricetable tr td:nth-child(1) {
    background-color: #EEE;
    white-space: nowrap;
}
.color {
    background-color: #EEE;    
}
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  border-top: none;
}
.sticky::before {
  box-sizing: content-box;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid #DDD;
  z-index: -1;
}

補足
スマホのみの実装を考えていますので、スマホ部分の記述のみ抜粋しました（PCでは全表示、固定無し）。
またスマホはiphoneで確認しています。

その他、不足があればご指摘下さい。
何卒、宜しくお願いします。

yambejp

2024/07/16 03:26

全体的に何をどうしたいかわかりません、想定する挙動を図示できませんか？テーブル要素をblockにする意図がよくわかりません（グリッドデザインにする？）

toomookoo

2024/07/16 04:01

色々なサイトを見て、「safariでテーブルがインラインだと効かないことがある」という記述があったので指定しました。図解は難しいのですが、ページ中ほどにテーブルがあり、それを横スクロールで見せたいです。左端一列が固定になり、横長のテーブルを見やすくさせる意図です。左端一列は固定になり、横スクロールは出来るのですが、上下の別コンテンツ（文章や画像）が横ブレします。具体的にはコンテンツの右側に、空白部分がある状態です。

toomookoo

2024/07/16 06:22

tableのさらに外側に<div>などが必要で、そこに横幅サイズとoverflow-x: auto;　を当てないといけなかったようです。解決しました。コメントありがとうございました。