この Web サイトのテーブルをモバイル デバイスで適切に動作させようとしています: http://whitehallrow.com/classic-whitehall-spirit-17-slide-seat-model/
ページには 2 つのテーブルがあります。仕様表とボートオプションの価格表。すべての太字の単語が画面の左側に表示され、データが右側に表示されるように、仕様表を中央で分割して折り返す必要があります。
また、価格表がページからはみ出さないように、幅を狭くしてほしい。各列にパーセンテージで幅を割り当てようとしましたが、それから結果が得られないようです。
私は HTML テーブルを扱うのが得意ではないので、ここで少し迷っています。どうすれば彼らを協力させることができますか？
まず、ここで HTML を教えることはできません。あなたはそれを自分で学ぶ必要があります。
2 つ目は、このページの設計が行き過ぎていることです。既製のテーマを備えたコンテンツ管理システムを使用していますか? HTML と CSS は、このような単純なサイトには「重すぎる」からです。特にモバイルの「最適化」では、変更がより困難になります。
specs テーブルの場合: 4 行 4 列のテーブルではなく、8 行の 2 列のテーブルを 1 つ使用します。
ただし、デスクトップ ブラウザーで同じ/類似のレイアウトを維持したい場合は、もう少し複雑になります。
価格表の場合: ハードコーディングされた と スタイル シートの の両方を削除しstyle="width: 400pxますwidth: 100%。(後者はすべてのテーブルに影響しますがwidth: 100%、最初からすべてのテーブルを対象にするのは得策ではありません)。そうすれば、コンテンツと画面幅に基づいてテーブルのサイズが自動的に変更されます。値が互いに押しつぶされないように、表のセルにパディングを追加する必要があります。