スタッフブログStaffblog

レスポンシブなテーブル

2013.10.17
スタッフブログ

ども、タカミチです。

 

仕事でHTMLでのテーブル作成を行っていたのですが

HPがレスポンシブデザインなので、列数の多い表だと

つぶれてしまう・・・

あー

指定のポイントでレイアウトを変化できないかと

ググってみることに

 

ありましたよー

参考サイト
http://lab.informarc.co.jp/javascript/reflow_table_for_responsive_web_design.html

 

とりあえず、いろんなわからない単語はググって解決していき、できました。

こんなんが
table1


こんなんになります。
table2


ある程度javascriptとcssの理解が必要でした。
一応参考にしたcssとjavascriptのサンプルコードです。まあ参考サイトさんをみればありますが・・・
cssに関しては、少しHPにあわせて変更しましたが、javascriptの方は、ほぼいじらずにいけました。

/* CSS */
.simple {
width: 100%;
}
.simple th,
.simple td {
padding: 10px 12px;
border-bottom: 1px solid #ccc;
}
.reflow .label {
display: none;
}@media screen and (max-width: 480px) {
/* 本来のヘッダーを非表示 */
.reflow thead { display: none; }/* セルを横幅100%に拡大 */
.reflow th,
.reflow td { float: left; clear: left; padding: 0; width: 100%; border-width: 0 0 1px; text-align: left !important; }

/* tr毎の境界を明確に */
.reflow tr > td:first-child { margin-top: 20px; border-top: 2px solid #000; }
.reflow tr > td:last-child { border-bottom: 2px solid #000; }
.reflow tr:first-child > td:first-child { margin-top: 0; }

/* ラベルを左右に配置 */
.reflow .label,
.reflow .content { padding: 5px 3px; }
.reflow .label { display: block; float: left; width: 30%; background: #e6e6e6; }
.reflow .content { margin: 0 0 0 33%; background: #fff; }
}

// JavaScript
$(function() {
$.fn.reflowTable = function( options ) {
options = $.extend({
callback: function() {}
}, options );

return this.each(function() {
var $self = $(this),
trs = $self.find( ‘tbody tr’ ),
ths = $self.find( ‘thead th’ ),
labels = [];

ths.each(function( i ) {
labels[i] = $(this).text();
});
trs.each(function() {
$(this).children().each(function( i ) {
var _$self = $(this);

_$self.wrapInner( ‘

‘ );
_$self.prepend( ‘‘ + labels[i] + ‘‘ );
});
});

options.callback();
});
};

$(function() {
$( ‘table.reflow’ ).reflowTable();
});
})( jQuery );

この記事をSNSでシェア!