レスポンシブWebデザインで構築したサイトをスマホ（狭いスクリーンサイズ）で閲覧すると、列数の多いテーブルは何かしらの対策を行わないと非常に見辛いレイアウトになる事があります。

対策として、CSSやJSを使ったテクニックが色々とありますが、対策の1手段としてリフローテーブルをご紹介します。
元のアイデアはjQueryMobile1.3以降で実装されたReflow Tableを参考にしています。

jQueryMobileの大半の機能が不要で、パフォーマンス（ロード／スクリプト評価時間）を少しでも向上させたい場合は、
リフローテーブルライクなモジュールを自前実装するのも一考の価値があるかと思います。

デモ

メディアクエリに対応したブラウザでご覧ください。
ウィンドウサイズを縮めていくと480px以下で下段テーブルのレイアウトが変化します。

• リフローテーブルデモ

仕組み

文章で説明すると難しいので上記デモをご覧いただくのが一番ですが、内部的には以下の処理を行なっています。
colspan／rowspan属性を指定したテーブルには非対応となります。

• thead要素内のテキストをラベルとしてtbody要素内の各セルへ複製。
• thead要素は非表示。（上記複製により不要のため）
• tbody要素内の各セルを縦に並べて横幅を拡大。ラベルを左に、ラベル以外のコンテンツを右に配置。

サンプルコード

要jQuery。お好みでCSSは調整してください。

<!-- HTML -->
<table class="simple reflow">
<thead>
<tr>
<th>タイトルA</th>
<th>タイトルB</th>
<th>タイトルC</th>
<th>タイトルD</th>
</tr>
</thead>
<tbody>
<tr>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
</tr>
<tr>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
</tr>
<tr>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
<td>テキスト。テキスト。テキスト。テキスト。</td>
</tr>
</tbody>
</table>

/* 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( '<div class="content"></div>' );
_$self.prepend( '<b class="label">' + labels[i] + '</b>' );
});
});

options.callback();
});
};

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

今後の予定（課題など）

colspan属性に対応

現時点ではcolspan／rowspan属性を指定したテーブルを対象外としているのでcolspan属性の対応を検討中です。
rowspan属性への対応は複雑になりそうなので予定していません。

jQuery非依存型に変更

jQueryを利用したプロジェクト中に開発したので要jQueryとしていますが
jQueryのメソッドはchildren()、wrapInner()、prepend()しか依存していないので非依存型にしたいと考えています。