scss レスポンシブテーブル
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss レスポンシブテーブル相关的知识,希望对你有一定的参考价值。
// 2列
table.demo01
tbody
tr
th CSS
td Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、…省略
tr
th レスポンシブデザイン
td 表示された機器の種類やサイズに応じて…省略
table {
width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
background: #f4f4f4;
}
/*----------------------------------------------------
.demo01
----------------------------------------------------*/
.demo01 th {
width: 30%;
text-align: left;
}
@media only screen and (max-width: 480px) {
.demo01 {
margin: 0 -10px;
th, td {
width: 100%;
display: block;
border-top: none;
}
tr:first-child th {
border-top: 1px solid #ddd;
}
}
}
以上是关于scss レスポンシブテーブル的主要内容,如果未能解决你的问题,请参考以下文章
scss レスポンシブ:テキストエリア固定,イメージエリア伸缩
javascript レスポンシブチェッカー
markdown レスポンシブ,カラム,インナー
scss レスポンシブ:リスト
scss レスポンシブ:延胡索リストを横并びに
scss 谷歌地图のiframe版をレスポンシブに対応させる