ITOBEN STYLE > CKeditorとレスポンシブWebデザイン(6):スマホ表示でテーブルのセルをすべて1列に並べる 2013年8月21日カテゴリー:未分類 CKeditorとレスポンシブWebデザイン(6):スマホ表示でテーブルのセルをすべて1列に並べる 「高度な設定」タブをクリックし、スタイルシートクラスにresponsiveと入力します。 別cssファイルで、メディアクエリを設定しています。 ただし、テーブルにテキストのみ入力の場合に限ります。 EC-CUBEの場合、thのグレーはtable.cssで設定されています。 ▼PC・タブレット表示 ▼スマホ表示 ▼スタイルシートクラスを設定しない場合は、テーブルがそのまま縮小されて表示されます。 CSS [css] /*テーブルのレスポンシブ*/ @media only screen and (max-width: 459px) { #document_area table.responsive, #document_area table.responsive tbody, #document_area table.responsive tr { display:block; } #document_area table.responsive th, #document_area table.responsive td { display:list-item; } } [/css]
「高度な設定」タブをクリックし、スタイルシートクラスにresponsiveと入力します。
別cssファイルで、メディアクエリを設定しています。
ただし、テーブルにテキストのみ入力の場合に限ります。
EC-CUBEの場合、thのグレーはtable.cssで設定されています。
▼PC・タブレット表示
▼スマホ表示
▼スタイルシートクラスを設定しない場合は、テーブルがそのまま縮小されて表示されます。
CSS
[css]
/*テーブルのレスポンシブ*/
@media only screen and (max-width: 459px) {
#document_area table.responsive,
#document_area table.responsive tbody,
#document_area table.responsive tr {
display:block;
}
#document_area table.responsive th,
#document_area table.responsive td {
display:list-item;
}
}
[/css]