レスポンシブ HTML テーブル ジェネレーター — モバイル スクロール
セルをクリックして入力することで、HTML テーブルを視覚的に作成できます。ライブ プレビューでクリーンでセマンティックなテーブル マークアップを取得できます。フォーマットを貼り付けたり変換したりする必要はありません。
処理中...
0%
結果
このページでは、7 列の幅の広いサンプルがすでに入力され、レスポンシブ ラッパーがすでにオンになっているテーブル ビルダーが開きます。そのため、修正の動作をすぐに確認できます。
幅の広いテーブルは、プレーンなレスポンシブ CSS がリフローできない数少ない要素の 1 つです。テキストは折り返されますが、列は折り返されません。そのため、6 つ以上の列があるテーブルは画面からオーバーフローするか、すべてのセルが携帯電話では読み取れないほど小さくなります。 overflow-x:auto を使用してテーブルを div で囲むと、テーブルが自然な幅に保たれ、訪問者はページ レイアウトを壊さずにテーブルを横にスクロールできます。
独自のデータに一致するように列を追加または削除し、任意のセルをクリックして編集し、完成したマークアップをコピーします。ラッパー div は、このチェックボックスがオンになっている間のみ追加されるため、ラップされた HTML とラップされていない HTML を並べて比較できます。