レスポンシブテーブル

テーブルの大きさはそのままに、ウインドウ幅が狭まっても水平にスクロールできるレスポンシブ対応のテーブルです。

iPhone5

iPhone7

iPad

Full

table data	table data	table data
table data	table data	table data
table data	table data	table data
table data	table data	table data
table data	table data	table data

クラス名

大きさ

背景色

Source Code

右上の「コピー」からご利用ください。

<div class="my-parts">
  <table>
    <tr><th>table data</th><th>table data</th><th>table data</th></tr>
    <tr><td>table data</td><td>table data</td><td>table data</td></tr>
    <tr><td>table data</td><td>table data</td><td>table data</td></tr>
    <tr><td>table data</td><td>table data</td><td>table data</td></tr>
    <tr><td>table data</td><td>table data</td><td>table data</td></tr>
  </table>
</div>

.my-parts {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.my-parts table {
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,.1);
  table-layout: fixed;
  width: 1300px;
}
.my-parts th, .my-parts td {
  border: 1px solid rgba(0,0,0,.1);
  padding: .6em;
  text-align: center;
  background: #fff;
}
.my-parts th {
  background: #009688;
  color: #fff;
  font-weight: bold;
}

Webパーツ屋とは？

HTMLとCSSをコピペで貼り付ければ実装できるコードをストックしているところです。「このデザインってどうやって実装するんだっけなぁ。。。」と調べる無駄な時間や自分で1からコーディングする時間を短縮することが目的です。

コーディングなんて所詮はデザインにそってHTMLやCSSを当てはめていくだけの単純作業です。当サービス「Webパーツ屋」をご活用いただきスピーディなコーディングを行なっていきましょう！

使い方について、詳しくは以下の記事で紹介しています。
→ コピペで簡単にコードを挿入できる「Webパーツ屋」というサービスを作りました！

免責事項

すべての環境において同一の表示になるとは限りません。環境に応じてコードは書き換えてください。
当サイト「Webパーツ屋」内のコードは自由に利用していただいて構いませんが、使用したことで何かしらのトラブルが発生しても、管理人のわたしは一切の責任を負わないことをご了承ください。
基本的にはChromeでしか動作確認していません...。