一番シンプルでレスポンシブなtableデザインまとめ html+css

スポンサーリンク
てきぱき
てきぱき

汎用性の高い、何処にでも使用できるシンプルでレスポンシブなテーブルデザインです。
コピペしてさっと使えます。

スポンサーリンク

シンプルなレスポンシブtable

会社概要、プロフィール、などなんにでも使えます。これくらいシンプルな方が、いろいろなところに使えて便利です。

全てレスポンシブなので、表の横幅は親要素のwidthと同じになります。

縦横線有の表

商号○○株式会社
創立昭和〇年〇月
資本金〇億円
代表者代表取締役社長 〇〇〇〇
社員数〇名
事業内容〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
事業所〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
html
<table class="table01">
  <tr>
    <th>商号</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>創立</th>
    <td>昭和〇年〇月</td>
  </tr>
  <tr>
    <th>資本金</th>
    <td>〇億円</td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>代表取締役社長 〇〇〇〇</td>
  </tr>
  <tr>
    <th>社員数</th>
    <td>〇名</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
  <tr>
    <th>事業所</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
</table>
css
.table01 {
  border-top: 1px solid #9e9e9f;
  width: 100%;
  border-collapse: collapse;
  font-size:14px;
}

.table01 tr {
  border-bottom: 1px solid #9e9e9f;
}

.table01 td {
  border: none;
  text-align: left;
  vertical-align: middle;
  padding: 16px 6%;
}

.table01 th {
  text-align: center;
  padding: 16px;
  width: 22%;
  font-weight: normal;
  border-right: 1px solid #9e9e9f;
}

/*スマホ*/
@media screen and (max-width: 767px) {
  .table01 th {
    padding: 10px 5px;
  }
  .table01 td {
    padding: 10px 5%;
  }
}

縦線が無い表

商号○○株式会社
創立昭和〇年〇月
資本金〇億円
代表者代表取締役社長 〇〇〇〇
社員数〇名
事業内容〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
事業所〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
html
<table class="table02">
  <tr>
    <th>商号</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>創立</th>
    <td>昭和〇年〇月</td>
  </tr>
  <tr>
    <th>資本金</th>
    <td>〇億円</td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>代表取締役社長 〇〇〇〇</td>
  </tr>
  <tr>
    <th>社員数</th>
    <td>〇名</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
  <tr>
    <th>事業所</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
</table>
css
.table02 {
  border-top: 1px solid #9e9e9f;
  width: 100%;
  border-collapse: collapse;
  font-size:14px;
}

.table02 tr {
  border-bottom: 1px solid #9e9e9f;
}

.table02 td {
  border: none;
  text-align: left;
  vertical-align: middle;
  padding: 16px 6%;
}

.table02 th {
  text-align: center;
  padding: 16px;
  width: 22%;
  font-weight: normal;
}

/*スマホ*/
@media screen and (max-width: 767px) {
  .table02 th {
    padding: 10px 5px;
  }
  .table02 td {
    padding: 10px 5%;
  }
}

背景色ありの表

商号○○株式会社
創立昭和〇年〇月
資本金〇億円
代表者代表取締役社長 〇〇〇〇
社員数〇名
事業内容〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
事業所〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
html
<table class="table03">
  <tr>
    <th>商号</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>創立</th>
    <td>昭和〇年〇月</td>
  </tr>
  <tr>
    <th>資本金</th>
    <td>〇億円</td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>代表取締役社長 〇〇〇〇</td>
  </tr>
  <tr>
    <th>社員数</th>
    <td>〇名</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
  <tr>
    <th>事業所</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
</table>
css
.table03 {
  border-top: 1px solid #ccc;
  width: 100%;
  border-collapse: collapse;
  font-size:14px;
}

.table03 tr {
  border-bottom: 1px solid #ccc;
}

.table03 td {
  border: none;
  text-align: left;
  vertical-align: middle;
  padding: 16px 6%;
}

.table03 th {
  text-align: center;
  padding: 16px;
  width: 22%;
  font-weight: normal;
  background-color:#e9e9e9; 
}

/*スマホ*/
@media screen and (max-width: 767px) {
  .table03 th {
    padding: 10px 5px;
  }
  .table03 td {
    padding: 10px 5%;
  }
}

スマホ表示の時、テーブルセルが一列になる表

テーブルセルがPC表示は2列になるけど、スマホ表示では1列になります。PCで、見ている方はウィンドウの横幅を縮めて確認してください。

スマホサイト向けに、このようにデザインを変更するのも見やすくて良いです。

商号○○株式会社
創立昭和〇年〇月
資本金〇億円
代表者代表取締役社長 〇〇〇〇
社員数〇名
事業内容〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
事業所〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
html
<table class="table04">
  <tr>
    <th>商号</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>創立</th>
    <td>昭和〇年〇月</td>
  </tr>
  <tr>
    <th>資本金</th>
    <td>〇億円</td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>代表取締役社長 〇〇〇〇</td>
  </tr>
  <tr>
    <th>社員数</th>
    <td>〇名</td>
  </tr>
  <tr>
    <th>事業内容</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
  <tr>
    <th>事業所</th>
    <td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
  </tr>
</table>
css
.table04 {
  border-top: 1px solid #ccc;
  width: 100%;
  border-collapse: collapse;
  font-size:14px;
}

.table04 tr {
  border-bottom: 1px solid #ccc;
}

.table04 td {
  border: none;
  text-align: left;
  vertical-align: middle;
  padding: 16px 6%;
}

.table04 th {
  text-align: center;
  padding: 16px;
  width: 22%;
  font-weight: normal;
  background-color:#e9e9e9;
}

/*スマホ*/
@media screen and (max-width: 767px) {
  .table04 th {
    padding: 10px 20px;
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:left;
  }
  .table04 td {
    padding: 10px 20px;
	display:block
  }
}
てきぱき
てきぱき

また新しいのを作り次第追加していくね。

<PR>
楽天市場で買い物するなら楽天カードが無いと損!
楽天カードで買い物するとポイント還元+2%~


さらに
楽天カード発行前にポイントサイト モッピーに登録&サイトを経由すると+10000ポイント(10000円分)もらえて(10000ポイントは11/15まで)楽天でのお買い物も+1%還元!

Yahooショッピング、ロハコで買い物するならYahooカード利用で+2%ポイント貰えてお得!
モッピーを経由してカード発行すると2000ポイント(2000円分)貰えて買い物するとポイント+1%!

↓↓↓

話題のポイ活してる?
お得に買い物するならポイントサイトは登録必須です
モッピーに登録&サイトを経由して買い物するだけでポイントが+1%〜貯まる! ポイント交換先は30種類以上!

ポイント交換先:現金、電子マネー、楽天ポイント、Tポイント、waonポイント、nanacoポイント、amazonギフト券など

ポイント貯めれるサービスは1000以上!
対象サイト例:楽天市場、Yahooショッピング、paypayモール、iHerb、LOHACO、Qoo10、ビックカメラ、auPAYマーケット、セブンネットショッピング、マツモトキヨシ、ベルメゾン、ワールドオンライン、コミックシーモア、Renta!(レンタ)、一休.com、LOHACO、ニッセン、三越伊勢丹、アカチャンホンポ、トイザラスベビーなどなど

登録しないと損してる!
↓登録&詳細はこちらをチェック!↓

モッピー!お金がたまるポイントサイト
web
スポンサーリンク
ぱんこをフォローする
てきぱきメモ

コメント

タイトルとURLをコピーしました