コピペでCSSのレスポンシブテーブル例_技術三昧ブログ

ホーム » ブログ » コピペでCSSのレスポンシブテーブル例

@2018/05/11

コピペでCSSのレスポンシブテーブル例
自分のホームページに導入する予定ですので、ここでメモする。


<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
</head>
<body>
<style>

* {
	margin: 0;
	padding: 0;
}
#contents {
	width: 980px;
	margin: 0 auto;
}
@media only screen and (max-width:1024px){
	#contents {
		width: 100%;
		margin: 0 auto;
	}
}

/* .ResponsiveTable CSS */
.ResponsiveTable {
	border-collapse: collapse;
    border-spacing: 0;
	box-sizing: border-box;
	width: 100%;
	width: calc(100% - 1px);
}
.ResponsiveTable th, 
.ResponsiveTable td {
	padding: 10px; 
	border: 1px solid #ddd; 
}
.ResponsiveTable th { 
	width: 30%; 
	text-align: left; 
	background: #f4f4f4; 
}
.ResponsiveTable thead th {
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	border: 0;
	background :none;
}
.ResponsiveTable tfoot td { 
	text-align:right;
	font-size: 80%; 
	border: 0;
}

@media only screen and (max-width:680px){
	.ResponsiveTable	{ 
		margin: 0 auto; 
	}
    .ResponsiveTable th,
    .ResponsiveTable td{
		width: 100%;
		border-top: none;
        display: inline-block;
		box-sizing: border-box;
    }
    .ResponsiveTable th {
    	border-bottom: 1px dotted #ddd;
    }
	.ResponsiveTable tr:first-child th { 
		border-top: 1px solid #ddd; 
	}
	.ResponsiveTable thead th {
		border: 1px solid #ddd; 
		border-bottom: 0;
	}
}
</style>

	<div id="contents">
		<div style="width:100%;">
			<table class="ResponsiveTable">
				<thead>
					<tr>
						<th colspan="2">
							コピペでCSSのレスポンシブテーブル例
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th>概要</th>
						<td>CSSでレスポンシブテーブルの例です。指定した幅以下の場合、テーブルのレイアウトを自動的に切り替わって表示します。</td>
					</tr>
					<tr>
						<th>レスポンシブデザイン</th>
						<td>レスポンシブデザインは当たり前の時代になっています。</td>
					</tr>
					<tr>
						<th>技術三昧</th>
						<td>システム開発中に気になった点を随時にここで掲載致します。
							また、当該サイトの姉妹サイトもあります。（ナビゲーションメニュー）、ぜひご閲覧ください。
						</td>
					</tr>
					<tr>
						<th>お願い</th>
						<td>ご参考になりましたら、ぜひSNSでご共有頂ければ嬉しいです。</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="2">
						adfasd
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>	
<body>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/285.html

閉じる

コピペでCSSのレスポンシブテーブル例_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！