レスポンシブ対応 画像付きテーブル
HTML
test.php
<div class="event_prize">
<table class="event_prize-table">
<tbody>
<tr>
<th>
1位
</th>
<td class="prize-table-img">
<img src="img/test_icon1.png" alt="アイコン1">
</td>
<td>
テスト1
</td>
</tr>
</tbody>
<tbody>
<tr>
<th>
2位
</th>
<td class="prize-table-img">
<img src="img/test_icon2.png" alt="アイコン2">
</td>
<td>
テスト2
</td>
</tr>
</tbody>
<tbody>
<tr>
<th>
3位
</th>
<td class="prize-table-img">
<img src="img/test_icon3.png" alt="アイコン3">
</td>
<td>
テスト3
</td>
</tr>
</tbody>
</table>
</div>
SCSS
_test.scss
.event_prize {
table.event_prize-table {
width: 100%;
max-width: 640px;
margin: auto;
border: 1px solid rgba(#c9c9c9, 1);
tbody {
border-bottom: 1px solid rgba(#c9c9c9, 1);
th {
display: block;
padding: 5px;
border-bottom: 1px solid rgba(#c9c9c9, 1);
background: #353535;
font-family:FOT-ロダンNTLG Pro EB;
font-size: 16px;
line-height: (20/16);
}
td {
display: block;
padding: 3px 10px 10px;
font-size: 13px;
line-height: (16/13);
text-align: center;
}
td.special_icon {
margin-top: -10px;
}
td.prize-table-img {
padding: 10px 10px 0;
img {
width: 60px;
height: 60px;
}
}
}
}
}
@media only screen and (min-width: 768px) {
.event_prize {
table.event_prize-table {
tbody {
th {
display: table-cell;
width: 25%;
padding: 10px 10px;
border-right: 1px solid rgba(#c9c9c9, 1);
font-size: 18px;
line-height: (22/18);
vertical-align: middle;
}
td {
display: table-cell;
width: 60%;
padding: 10px;
font-size: 14px;
line-height: (17/14);
text-align: left;
}
td.special_icon {
margin-top: 0;
}
td.prize-table-img {
width: 10%;
padding: 10px 0 10px 10px;
text-align: center;
img {
width: 60px;
height: 60px;
}
}
}
}
}
}
Author And Source
この問題について(レスポンシブ対応 画像付きテーブル), 我々は、より多くの情報をここで見つけました https://qiita.com/test6tyome/items/8fb4345f88ddd902404d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .