2013年8月21日カテゴリー:未分類

CKeditorとレスポンシブWebデザイン(4):テーブルのセルに画像を配置する

「高度な設定」タブをクリックし、スタイルシートクラスにimageと入力します。

が設定され、1行のセルは等分され、配置された画像は、テーブルの縮小(ブラウザの縮小)に合わせて自動的に縮小されるようになります。

列数に合わせて、セルは等分されます。

CSS

[css]
/*テーブルセルに画像を配置したとき*/
#document_area table.image {
table-layout:fixed;
}
#document_area table.image th,
#document_area table.image td {
display:block;
}
#document_area table.image img {
clear: none;
max-width:100%;
margin:0;
}
@media only screen and (min-width: 460px) {
/*テーブルセルに画像を配置したとき*/
#document_area table.image th,
#document_area table.image td {
display: table-cell;
}
}
[/css]

▼スマホでの表示