レスポンシブテーブルレイアウトをレンダリングしようとしましたが、テーブルのレコードごとにデスクトップに12列、1行に3列、タブレットに4列、2列に6列スマートフォン。私はすでにやったレスポンシブテーブルwithヘッダー
は定義することであるCSS3 with media queries、問題があるということdemo html table
- 現在の実装で - 私はセルと一緒にそれらを表示したいと思いながら、ヘッダーが上に常にあります小さな幅のビュー（スマートフォン/タブレット）の値ですが、を達成する方法はわかりません。 CSS3のヘッダーはパラメトリックな方法でハードコーディングされていません。
で明確なモバイルおよびデスクトップのチャネルを作成したほうが良いいただきたいと思います。
スタックは
* {
box-sizing: border-box;
}
.cols {
display: inline-flex;
min-width: 100%;
border: 1px solid gray;
counter-reset: col;
}
.col {
flex: 1;
display: inline-flex;
flex-direction: column;
align-items: stretch;
counter-increment: col;
}
.col:first-child div {
padding: 12px;
}
.col:not(:first-child) div {
padding: 12px 12px 12px 0;
}
.col > div:first-child {
background: #4CAF50;
color: white;
}
.col > div:not(:first-child) {
border-top: 1px solid gray;
}
.col > div {
white-space: nowrap;
}
.col > div::after {
content: counter(col);
}
.col > div:nth-child(even) {
background-color: #e2e2e2;
}
@media only screen and (max-width: 1024px) {
/* For smaller desktop: */
.cols {
flex-wrap: wrap;
}
.col {
min-width: calc(100%/6);
}
}
@media only screen and (max-width: 768px) {
/* For tablets: */
.col {
min-width: calc(100%/4);
}
}
@media only screen and (max-width: 600px) {
/* For mobile phones: */
.col {
min-width: calc(100%/2);
}
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}<div class="header">
<h1>Responsive Table</h1>
</div>
<div class="cols">
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
<div class="col">
<div>
Header
</div>
<div>
Flight
</div>
<div>
Voyage
</div>
<div>
Pipeline
</div>
</div>
</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>あなたの提案をありがとう、ありがとう、私はこれをしばらく試してみましょう –
私は今、どのように進歩するかを見つけたと思います。
thタグでデスクトップヘッダーの一般的なCSSクラスを定義し、スマートフォンとタブレットの予備メディアクエリにこのようなクラスの属性display: none;を入れました。
インラインヘッダーが小さいサイズのビューでのみ表示されるようにするためのViceversa。
私はそれが標準的なアプローチでなければならないと思いますが、私はさまざまなアイデアや提案をしています。とにかく - サイドノートとして - このような応答性のあるテーブルはまだ私にとっては実用的なアプローチには見えません：あまりにも多くのものは、ヘッダーや列だけでなく、レコードの数などのページ、ページ数、あたりに...私はあなたがまたflexboxを使用して列ベースの構造を行うことができ、完全に異なるHTMLページ
をスニペットあなたはあなたのコードがjsfiddleにまたはここに置くことができますか？だから我々はそれと遊ぶことができますか？ –
Jsfiddle [here]（https://jsfiddle.net/e1j0xzwf/） –