問題
tableをPCは横向き、スマートフォンは縦向きにするには？
解決策
スマートフォンを前提にしたtableレイアウトに組んでおき、PC時にtrのdisplayを「table-cell」に、各セルのdisplayを「block」にして、高さを揃える。
tableの向きを変える手法
tableのレスポンシブ対応は列が多ければ多いほど難しくなります。
今回はtableをレスポンシブ対応にする方法の1つとして、tableをPCは横向き、スマートフォンは縦向きにする方法をご紹介します。
DEMOはこちら
| 項目A | 項目B | |
|---|---|---|
| 月曜日 | 内容 内容 |
内容 |
| 火曜日 | 内容 | 内容 |
| 水曜日 | 内容 | 内容 内容 |
| 木曜日 | 内容 内容 |
内容 |
| 金曜日 | 内容 | 内容 |
| 土曜日 | 内容 | 内容 |
HTMLはこちら
<table class="tablematch">
<tbody>
<tr>
<th><span><span> </span></span></th>
<th><span><span>項目A</span></span></th>
<th><span><span>項目B</span></span></th>
</tr>
<tr>
<th><span><span>月曜日</span></span></th>
<td>内容<br>内容</td>
<td>内容</td>
</tr>
<tr>
<th><span><span>火曜日</span></span></th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th><span><span>水曜日</span></span></th>
<td>内容</td>
<td>内容<br>内容</td>
</tr>
<tr>
<th><span><span>木曜日</span></span></th>
<td>内容<br>内容</td>
<td>内容</td>
</tr>
<tr>
<th><span><span>金曜日</span></span></th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th><span><span>土曜日</span></span></th>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>ポイント!
スマートフォン想定のtableレイアウトで構築します。
CSSはこちら
@media print, all and (min-width: 768px) {
table.tablematch{
width: 100%;
table-layout: fixed;
}
table.tablematch tr {
display: table-cell;
vertical-align: top;
}
table.tablematch th,
table.tablematch td {
border-collapse: collapse;
display: block;
border: 1px solid #ffffff;
}
table.tablematch th{
vertical-align: middle;
padding: 5px;
background-color: #FCECE8;
text-align: center;
}
table.tablematch td {
vertical-align: top;
padding: 5px;
background-color: #fcf5e8;
}
table.tablematch th > span{
display: table;
width: 100%;
height: 100%;
}
table.tablematch th > span > span{
display: table-cell;
vertical-align: middle;
}
}
@media only screen and (max-width: 767px) {
table.tablematch{
width: 100%;
table-layout: fixed;
}
table.tablematch th,
table.tablematch td {
border-collapse: collapse;
font-size: 85.7142%;
border: 1px solid #ffffff;
}
table.tablematch th{
vertical-align: middle;
padding: 5px;
background-color: #FCECE8;
text-align: center;
}
table.tablematch td {
vertical-align: top;
padding: 5px;
background-color: #fcf5e8;
}
}ポイント!
PC時にtrのdisplayを「table-cell」に、各セルのdisplayを「block」にします。
Javascriptはこちら
var w = $(window).width();
function tableswitch(){
if($('table.tablematch').length){
$('table.tablematch').each(function(index, element) {
var maxheight = 0;
// 各セルごとに処理（3列想定[1～3]）
for(var i = 1; i<4; i++){
$(this).find('tr > *:nth-child('+i+')').each(function(index, element) {
// javascriptで設定したスタイルをリセット
$(this).removeAttr('style');
// PCの場合
if($(window).width() > 767){
// 行ごとにセルを一通り参照し、一番高さのあるセルの値を取得する（変数[maxheight]に値を格納）
if(maxheight <= $(this).height()){
maxheight = $(this).height();
maxheight = Math.ceil(maxheight);
};
}
});
if($(window).width() > 767){
// 行ごとの全てのセルに一番高いセルの高さを適用させる
$(this).find('tr > *:nth-child('+i+')').css('height',maxheight+"px");
}
};
});
};
}
tableswitch();
$(window).resize(function(){
// PCとスマートフォンが切り替わったら
if (w > 767 && $(window).width() <= 767 ) {
tableswitch();
}
if (w <= 767 && $(window).width() > 767 ) {
tableswitch();
}
w = $(window).width();
});ポイント!
各trタグ内の1番目、2番目、3番目…のセルに対して、一番高いセルの高さに合わせます。
コメント