Web サイトで表を使用する場合は、モバイル デバイスにも適合させる必要があります。 私は 2 つの適応オプション (圧縮とワードラップ + 表を 1 列に配置) を使用します。

最初のオプションはすべての複数列テーブルに適しており、2 番目のオプションはフロントエンドの一部のサイトで使用しています。 メニューを表形式で表示することにはこのような弱点がありますが、解像度を下げると圧縮されすぎてユーザーの憤慨を引き起こします。 低い解像度で 1 つの列に変換するのは良い解決策ですが、やはり、すべてのテーブルにそれを使用する価値はありません。

基本オプション

そのため、サイト上のほとんどのテーブルでは次の CSS コードを使用します。

@media 画面と (max-width:1000px)(td(word-break:break-all;)

解像度が 1000 ピクセル未満の場合、ブロックに収まらない単語は新しい行で開始するように指定します。 解像度 1000 は一例です。サイトを見てください。解像度を低く設定する方が適切な場合もあります。

CSS で二重コードを使用すると、適切な表表示を実現できます。 私は並行して使用します:

@media screen と (max-width:700px)(img(max-width:96% !重要;高さ:自動 !重要;) iframe、textarea、input、button、submit、video、object、embed(max-width: 99% !重要;) テーブル、スパン、div、ins(max-width:100% !重要;)

解像度が 700 ピクセル未満の場合、テーブルは 100% のサイズで表示されます。つまり、圧縮されていますが、幅はブロック全体を占めます。 ! important プロパティは、700 ピクセルより小さいすべての解像度に適用されることを示します。

1 列の適応

低解像度で 1 列に表示されるようにテーブルを調整することはさらに困難です。 すべてのテーブルに適しているわけではありませんが、多くの場合は必要です。 まず、テーブルの元のクラスを指定します。たとえば、

次に、コードはスタイルで記述されます。

@media のみ screen and (max-width: 320px),(min-device-width: 320px) and (max-device-width: 600px) /* テーブルがテーブルのようにならないように強制します */ table.mceItemTable, table. mceItemTable thead、table.mceItemTable tbody、table.mceItemTable th、table.mceItemTable td、table.mceItemTable tr ( 表示: ブロック; }

この場合、display: block; tbody、th、td、tr が mceItemTable テーブルでロックされていることを示します。 その結果、解像度が 600 ピクセル未満のテーブルは 1 列で構築され、実際にはテーブルではなくなります。

テーブルの使用は、ユーザーの利便性というかごのもう 1 つのパイですが、テーブルはモバイル デバイス上で正しく表示される必要があります。そうでないと、結果は予想とは逆になります。訪問者はテーブルの曲線から逃げてしまい、PF が悪化します。 すべてのテーブルに対して 1 つの列にテーブルを表示すること、またはその逆を禁止する人はいませんが、テーブルのデザインの特徴によっては、混合した方が良いでしょう。

窓: Internet Explorer 10.0 以降、Firefox 1.5 以降、Google Chrome、Opera 9.5 以降、Safari 3.1 以降、SeaMonkey 1.0 以降 [1]。

Linux: Firefox 1.5 以降、Google Chrome / Chromium、Opera 9.5 以降、SeaMonkey 1.0 以降 [2]。

HTML テーブルに含まれるデータが多すぎると、ページ上の利用可能なスペースよりも広くなり、オーバーフローが始まります。 この状況を解決するには、表に水平スクロールを追加します。 例：

1	2	3	4	5	6	7	8	9	10
テーブルデータ_1	テーブルデータ_2	テーブルデータ_3	テーブルデータ4	テーブルデータ5	テーブルデータ_6	テーブルデータ7	テーブルデータ_8	テーブルデータ9	テーブルデータ_10

HTML/XHTML。 コード：

<テーブル>

<tr>

<番目>1</番目>

<番目>2</番目>

<番目>3</番目>

<番目>4</番目>

<番目>5</番目>

<番目>6</番目>

<番目>7</番目>

<番目>8</番目>

<番目>9</番目>

<番目>10</番目>

</tr>

<tr>

<た>テーブルデータ_1</td>

<た>テーブルデータ_2</td>

<た>テーブルデータ_3</td>

<た>テーブルデータ_4</td>

<た>テーブルデータ_5</td>

<た>テーブルデータ_6</td>

<た>テーブルデータ_7</td>

<た>テーブルデータ_8</td>

<た>テーブルデータ_9</td>

<た>テーブルデータ_10</td>

</tr>

</ テーブル>

テーブル(表示: ブロック; オーバーフロー x: 自動;)

/* 追加の CSS。例に見た目を与えるためのものです: */

テーブル(border-collapse: 折りたたむ;)

テーブル td,th(パディング: 10px; ボーダー: 1px #000 ソリッド;)

注記: CSSプロパティ 表示: ブロック視覚的な歪みを生じることなくデータを収容するのに必要な幅のみをテーブルが占めるようにします。 ページ上の利用可能なスペースの幅全体に広げる必要はありません。 CSSコードを追加しても 幅: 100%。 例：

1	2	3
テーブルデータ_1	テーブルデータ_2	テーブルデータ_3

Aliosque サブディトスとテーマ

CSS を使用して、絶対に配置された要素を水平方向の中央に配置します。 例: HTML/XHTML。 コード：

CSS。 コード: .example (位置: 相対; 左: 0px; 上: 0px; 高さ: 90px; 幅: 100%; フロート: 左; パディング: 10px; ボーダー: 1px #ccc ソリッド; 背景: #fafafa; -moz-box -sizing: ボーダーボックス; -webkit-box-sizing: ボーダーボックス; -ms-box-sizing: ボーダーボックス; ボックスサイズ: ボーダーボックス;) .example img (位置: 絶対; 左: 0px; right: 0px; margin: 0px auto; width: 68px;) この例では、絶対配置された img 要素が中央に配置されていますが、一般に、この水平方向の中央揃えの方法は、他の絶対配置された要素でも同様に機能します。 絶対的に配置された要素の幅は、パーセントまたはその他の測定単位で表すこともできます。 中央揃えの要素が配置されるコンテナ (例では .example) の CSS プロパティは大きく異なる場合があります。中央揃えは、要素に直接関連するスタイルを使用して作成されます: .example img (position: ABSOLUTE; LEFT: 0px) ; 右: 0px; マージン: 0px 自動;)。 [ 1 ] Netscape 8.01 以降、Mozilla 1.5 以降でも。 [ 2 ] Netscape 8.01 以降、Mozilla 1.5 以降でも。

CSS には「float:bottom」プロパティはありませんが、他のいくつかの方法で効果を実現できます。 例: Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod Tempor incididunt ut Labore et dolore magna aliqua。 必要最小限の費用で、必要な作業をすべて行って、結果を得ることができます。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. 例外的に、問題を提起することはできませんが、責任を負う義務を負うものではありません。 リンク 1 リンク 2 リンク 3 フロート ボトム HTML / XHTML。 コード：

CSS。 コード: .box1 (位置: 相対; 上: 0px; 左: 0px; 浮動小数点: 左; 高さ: 自動; 幅: 100%;) .content1 (位置: 相対; 上: 0px; 左: 0px; 浮動小数点: 左;高さ: 自動; 幅: 100%;) .left1 (位置: 相対; 上: 0px; 左: 0px; 浮動小数点: 左; 高さ: 自動; 幅: 64%;) .menu1 (位置: 相対; 上: 0px; left: 0px; float: left; height: auto; width: 36%;) .bottom1 (position: ABS;bottom: 0px; right: 0px;) /* 例に外観を与えるための追加の CSS */ (色: #ddd; テキスト整列: センター;).content1 (背景: #bbb;).left1 (最小高さ: 100px; パディング: 2%; テキスト整列: 両端揃え; 背景: #006; -moz -ボックスサイズ: ボーダーボックス; -webkit-ボックスサイズ: ボーダーボックス; -ms-box-sizing: ボーダーボックス;) .menu1 (パディング: 2%; フロート: 右) ; 背景: #060; -moz-box-sizing: border-box; -ms-box-sizing: border-box;) menu1 p (位置: 相対; 上: 0px; 左: 0px; 浮動小数点: 左; 高さ:自動; 幅: 100%; パディング: 0px; margin: 0px;).menu1 a (色: #ddd; テキスト装飾: なし;).menu1 a:hover (テキスト装飾: 下線;).bottom1 (パディング: 2%; カラー: #eee; 背景: # 600;) Web ページのすべてのコンテンツは box1 コンテナーに含まれています。 内部には 2 つの div コンテナがあります: 1. content1 。左側に実際のコンテンツがあり、右側にメニューがあります。 2. content1 の後のbo​​ttom1。

テーブルがさまざまな画面解像度にうまく適応できれば、人類は今でもテーブル レイアウトを作成しているでしょう。 私は今でもその時のことを思い出し、自分が何を言っているのか理解しています。

しかし、私たちは異なる時代に生きており、テーブル レイアウトは忘れ去られていますが、Web サイトでクラシックなテーブルを使用する必要性は依然として残っています。 したがって、テーブルの存在を否定するのではなく、最も簡単な方法を学びます。 テーブルをレスポンシブにする方法.

レスポンシブテーブルのデモ .

HTMLマークアップ

シンプルなものを作成しました HTML表、画面内に収まっていれば大丈夫です。 画面幅を縮小すると、テーブルが切り取られてデータが表示されなくなるか、テーブルが非常に小さくなり、再び何も表示されなくなります。

おそらくタグ内にテーブルを配置したことに気づいたでしょう。 ディビジョンそして明らかに理由があります。 タグ自体 ディビジョンスタイルを割り当てるまでは何も与えられません。

CSS スタイル

プロパティを 1 つ設定するだけで、 テーブルは適応します、コンテンツがタグ内にある場合、水平スクロールバーが自動的に表示されます。 ディビジョン現在の画面の軸に沿った幅に収まらなくなります ×.

ディビジョン (
オーバーフロー-x: 自動;
)

残りのテーブルタグのスタイルを設定しましょう。

テーブル （
境界崩壊: 崩壊; /* 単一行のみを表示します */
境界線の間隔: 0; /* セル間の距離 */
幅: 100%;
ボーダー: 1px ソリッド #afb42b;
色: #212121;
}

ち、ち(
テキスト整列: 左;
パディング: 8px;
}

タグのスタイル設定 tr(行) は別のコメントに値します。 テーブルの行が縞模様 (ゼブラ) になるのはすでに標準になっています。 これには疑似クラスが使用されます :n番目の子括弧内は意味あり 平。 意味 平、すべての偶数要素にプロパティを割り当てます。この場合、これは背景色です。 したがって、テーブルはストライプ化されます。

データ テーブルはレスポンシブ デザインをうまく処理できません。 残念ながら、この瞬間は存在します。 レスポンシブ デザインとは、さまざまな画面サイズに合わせてデザインをカスタマイズすることです。 では、画面がデータ テーブルの最小幅よりも狭い場合はどうなるのでしょうか? ズームアウトして表全体を表示することもできますが、テキストのサイズが小さすぎて読めなくなります。 または、読み取りポイントを拡大することもできますが、表を表示するには、垂直方向、水平方向にスクロールする必要があり、(悲しいことに) 必要があります。 データ テーブルは非常に広範囲にわたる可能性があり、確かにその範囲は広いです。 テーブルの幅は柔軟にできます (重み = 100%)。ただし、セルの内容が非常に狭くなり、まったく見えなくなる可能性があります。

この不快な瞬間を回避するために、適応テーブルが使用されます。 このようなテーブルでは、画面が小さすぎてコンテンツ全体を表示できない場合、水平スクロール バーが表示されます。

CSSを使用してレスポンシブテーブルを作成する方法

レスポンシブテーブルを作成するには、コンテナ要素を追加します オーバーフロー-x:自動その周り

:

...