Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

[CSS]レスポンシブで見やすいtable(表)

table

Tableで作った表を小さなデバイスで見るのって大変ですよね。画面を横にしてみたり画面を広げてみたり。
CSSで見やすい表にする事が出来ます。Bootstrapの様な@mediaでレスポンシブ対応の設定がなされら、とても簡単です。

table

基本的なTebleを作ってCSSで調整します

<table>
<tr>
<th>URL</th>
<td>https://cocotiie.com</td>
</tr>
<tr>
<th>メール</th>
<td>XXX@cocotiie.com</td>
</tr>
</table>

大事なのは、@mediaのdisplay: block;とwidth:100%;。他はお好みでカスタマイズして下さい。※ @mediaの部分は既に記載済みの場合は不要です。

table {
  margin: 20px auto;
  border-collapse: collapse;
 border-spacing: 0;
}
th, td  { padding: 10px; border: 1px solid #ddd; }
th  { background: #f4f4f4; }
th  { width: 30%; text-align: left; }
 
@media screen and (max-width: 640px) {
table {
    width: 80%;
  }
th,td {
  border-bottom: none;
    display: block;
    width: 100%;
  }
}
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX