Oracle Content Managementでは、段落コンポーネント内にレスポンシブ表のサンプルCSSが用意されており、これを使用することで、モバイル・デバイスでは行データが積み上げられて表示されます。
レスポンシブ表は、画面のサイズに応じて、コンテンツが効果的に表示されるよう表を調整します。たとえば、5列の表は、Webページでは横方向で問題なく表示されますが、スマートフォンで表示した場合には、積み上げた方がデータは見やすくなります。レスポンシブ表が適切に動作するには、ヘッダー行が必要なことに注意してください。
生成された次のHTMLでは、表の各セルに、列ヘッダーのテキストと同じ値のdata-label属性が追加されています。
<thead> <tr> <th scope="col">ACCOUNT</th> <th scope="col">DUE DATE</th> <th scope="col">AMOUNT</th> <th scope="col">MINIMUM</th> <th scope="col">PERIOD</th> </tr> </thead> <tbody> <tr> <td data-label="ACCOUNT">Visa</td> <td data-label="DUE DATE">04/16/2020</td> <td data-label="AMOUNT">$3,090</td> <td data-label="PERIOD">03/09/2020 - 04/08/2020</td> </tr>
各セルにその属性があると、次のCSSルールを適用した場合には、TDがそれぞれの上に積み上げられます。
.scs-paragraph:not(.scs-paragraph-edit) table td { border-bottom: 1px solid #ddd; display: block; text-align: right; } .scs-paragraph:not(.scs-paragraph-edit) table td::before { content: attr(data-label); float: left; font-weight: bold; }
次のメディア・ルールにより、画面サイズの問合せが行われ、画面サイズが767ピクセル未満の場合にのみ有効になります:
@media screen and (max-width: 767px) {
cssを使用して、挿入された表をレスポンシブにすることができるコード・サンプルは、提供されているStarterThemeのデフォルトのdesign.cssにあります。StarterThemeからサイトを作成する場合、段落スロットに挿入した表は、デフォルトでレスポンシブになります。表を挿入するには:
完了したら、「表示」モードに切り替えて、画面の幅が767ピクセルより狭い表示オプションを選択し、結果をプレビューします。編集モードでは表がレスポンシブに動作しないため、表示モードにする必要があります。
別のテーマからサイトを作成する際にレスポンシブ表を使用する場合は、StarterThemeのdesign.cssから、使用するテーマのdesign.cssファイルにコードをコピーする必要があります。
/** * An example CSS of how to render a table responsively. * It enables stacking of row data on mobile devices. * Only do this for view mode (not for edit mode). * * On each cell rendered, it adds a user-defined attribute * 'data-label' with value matching the column header text. */ @media screen and (max-width: 767px) { .scs-paragraph:not(.scs-paragraph-edit) table { border: 0; } .scs-paragraph:not(.scs-paragraph-edit) table caption { font-size: 1.3em; } .scs-paragraph:not(.scs-paragraph-edit) table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .scs-paragraph:not(.scs-paragraph-edit) table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; } .scs-paragraph:not(.scs-paragraph-edit) table td { border-bottom: 1px solid #ddd; display: block; text-align: right; } .scs-paragraph:not(.scs-paragraph-edit) table td::before { content: attr(data-label); float: left; font-weight: bold; } .scs-paragraph:not(.scs-paragraph-edit) table td:last-child { border-bottom: 0; } }