CKeditorとレスポンシブWebデザイン（6）：スマホ表示でテーブルのセルをすべて1列に並べる

「高度な設定」タブをクリックし、スタイルシートクラスにresponsiveと入力します。
別cssファイルで、メディアクエリを設定しています。
ただし、テーブルにテキストのみ入力の場合に限ります。

EC-CUBEの場合、thのグレーはtable.cssで設定されています。

▼PC・タブレット表示

▼スマホ表示

▼スタイルシートクラスを設定しない場合は、テーブルがそのまま縮小されて表示されます。

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;
}
}