テーブルパーツ｜コピペで使えるHTML/CSS/JSパーツ集

ta1

html

/*テーブル（ta1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta1-parts {
	table-layout: fixed;
	border-top: 1px solid var(--border-color);	/*テーブルの一番上の線。幅、線種、varは色の設定でtheme.cssのborder-colorを読み込みます。。*/
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*tr（１行分）タグ設定*/
.ta1-parts tr {
	border-bottom: 1px solid var(--border-color);	/*テーブルの下線。幅、線種、varは色の設定でtheme.cssのborder-colorを読み込みます。。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1-parts th, .ta1-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1-parts th {
	width: 13rem;		/*幅。13文字分。*/
	text-align: left;	/*左よせにする*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

css

ta2

html

/*テーブル（ta2-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid var(--border-color);	/*線の幅、線種、varは色の設定でtheme.cssのborder-colorを読み込みます。。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 13rem;		/*幅。13文字分。*/
	text-align: left;	/*左よせにする*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

css

ta3

html

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*テーブルブロック設定*/
.ta3-parts {
	border-collapse: separate;
	border-spacing: 0 1rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3-parts th, .ta3-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta3-parts th {
	width: 13rem;		/*幅。13文字分。*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}

css

ta-stripe1

html

/*テーブル（ta-stripe1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-stripe1-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta-stripe1-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th、tdの共通設定*/
.ta-stripe1-parts th, .ta-stripe1-parts td {
	padding: 0.5rem 1rem;	/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: left;	/*テキストを左寄せ*/
}

/*１行目のth*/
.ta-stripe1-parts tr:first-child th {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*偶数行の背景色*/
.ta-stripe1-parts tbody tr:nth-child(even) {
	background: var(--light-color);		/*theme.light-colorを読み込みます。*/
	coolor: var(--light-inverse-color);	/*theme.light-inverse-colorを読み込みます。*/
}

css

ta-card1

小さな画面では、カード型（縦並び）になります。

html

/*テーブル（ta-card1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-card1-parts caption {
	font-weight: bold;		/*キャプション太字*/
	padding: 0.5rem 1rem;		/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	background: var(--bg-inverse-color);
	color: var(--bg-color);
	margin-bottom: 1rem;
}

/*テーブルブロック設定*/
.ta-card1-parts {
	width: 100%;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta-card1-parts th,
.ta-card1-parts td {
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: left;	/*左寄せ*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
}

/*th（左側）のみの設定*/
.ta-card1-parts th {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	width: 13rem;			/*幅。13文字分。*/
}

/*画面幅600px以下の追加指定（カード型に変更）*/
	@media (max-width:600px) {

.ta-card1-parts,
	.ta-card1-parts caption,
	.ta-card1-parts tbody,
	.ta-card1-parts tr,
	.ta-card1-parts th,
	.ta-card1-parts td {
		display: block;
		width: 100%;
	}
	.ta-card1-parts tr {
		margin-bottom: 1rem;	/*ブロック同士の間に空けるスペース。1文字分。*/
	}
	.ta-card1-parts th {
		border-bottom: none;	/*下の線を消す。入れた方がいいならこの設定を削除。*/
	}
	.ta-card1-parts td {
		border-top: none;	/*上の線を消す。*/
	}

}/*追加指定ここまで*/

css

ta-week1

クリニックなどの1週間の診療日のお知らせ向けテーブル。

html

/*テーブル（ta-week1-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week1-parts {
	table-layout: fixed;
	width: 100%;
}

/*上の角丸（thだけ）*/
.ta-week1-parts th:first-child {
	border-top-left-radius: 10px;
}
.ta-week1-parts th:last-child {
	border-top-right-radius: 10px;
}

/*受付時間の幅*/
.ta-week1-parts th:first-child,
.ta-week1-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.ta-week1-parts th:not(:first-child),
.ta-week1-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.ta-week1-parts th,
.ta-week1-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*１行目。th(曜日)の追加指定*/
.ta-week1-parts th {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*２行目。*/
.ta-week1-parts td {
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

css

ta-week2

クリニックなどの1週間の診療日のお知らせ向けテーブル。

html

/*テーブル（ta-week2-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week2-parts {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;	/*角を丸くする指定*/
	width: 100%;
	border: 1px solid var(--border-color);	/*テーブル外側の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*受付時間の幅*/
.ta-week2-parts th:first-child,
.ta-week2-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.ta-week2-parts th:not(:first-child),
.ta-week2-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.ta-week2-parts th,
.ta-week2-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
	border-right: 1px solid var(--border-color);	/*右の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.ta-week2-parts th:last-child,
.ta-week2-parts td:last-child {
	border-right: none;
}

/*最後の行の下線を消す*/
.ta-week2-parts tr:last-child td {
	border-bottom: none;
}

/*１行目。th(曜日)の追加指定*/
.ta-week2-parts th {
	background: var(--light-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*２行目以降。*/
.ta-week2-parts td {
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、、varは色の指定でtheme.cssのborder-colorを読み込みます。*/
}

css

ta-yoko1

おすすめプラン紹介などに向いたtable。画面幅が狭くなると横スクロールバーが出ます。

html

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
.ta-yoko1-parts {
	width: 100%;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}
.ta-yoko1-parts, .ta-yoko1-parts td, .ta-yoko1-parts th {
	text-align: center;
	border: 1px solid var(--border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定で、theme.cssのborder-colorを読み込みます*/
	padding: 1rem;	/*余白。1文字分。*/
}

/*一番左側の縦列の幅*/
.ta-yoko1-parts th:first-child,
.ta-yoko1-parts td:first-child {
    width: 12rem;	/*目安としては約12文字分。*/
}

/*１行目のプランブロック*/
.ta-yoko1-parts th {
	width: auto;
	position: relative;
	overflow: hidden;
}

/*３列目（スタンダードプラン）の背景色と文字色*/
.ta-yoko1-parts th:nth-of-type(3), .ta-yoko1-parts td:nth-of-type(3) {
	background: #fff668;	/*背景色*/
	color: #000;			/*文字色*/
}

/*１行目のプランブロック内の「おすすめ」表示*/
.ta-yoko1-parts th .osusume {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.7rem;		/*文字サイズ70%*/
	width: 120px;
	text-align: center;
	padding-top: 43px;
	padding-bottom: 2px;
	transform: rotate(-45deg) translate(-20px, -60px);
}

/*１行目のプランブロック内のアイコン（王冠マーク）*/
.ta-yoko1-parts th i {
	display: block;
	font-size: 1.4rem;	/*サイズ*/
}

/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

.scroll-parts {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /*iOSでなめらかに動く*/
	}

.ta-yoko1-parts {
		width: max-content;	/*中身に必要な幅で広がる*/
		min-width: 100%;	/*中身が少ない時は親幅に合わせる*/
	}

}/*追加指定ここまで*/

css

ta-yoko2

列が多いtable用。画面幅が狭くなると横スクロールバーが出ます。

html

css

ta-yoko3

プラン比較など。画面幅が狭くなると横スクロールバーが出ます。

html

/*テーブル（ta-yoko3-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-yoko3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta-yoko3-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th、tdの共通設定*/
.ta-yoko3-parts th, .ta-yoko3-parts td {
	padding: 0.5rem 1rem;	/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: center;	/*中央寄せ*/
}

/*１列目のth*/
.ta-yoko3-parts th {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*１行目のth*/
.ta-yoko3-parts tr:first-child th {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*「○」の設定*/
.ta-yoko3-parts .maru {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/	
	font-size: 1.3rem;	/*文字サイズ。1.3倍。*/
}
/*「×」の設定*/
.ta-yoko3-parts .batsu {
	opacity: 0.4;	/*色を40%だけ出す*/
}
/*「△」の設定*/
.ta-yoko3-parts .sankaku {
	opacity: 0.4;	/*色を40%だけ出す*/
}

/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

/*横スクロール*/
	.ta-yoko3-scroll-parts {
		overflow-x: auto;					
		-webkit-overflow-scrolling: touch;	/*iOSでなめらかに動く*/
	}

.ta-yoko3-parts {
		min-width: 500px;	/*横スクロールバーを出す基準。適当に調整してみて下さい。*/
	}

}/*追加指定ここまで*/

css

テーブルパーツ

テーブルパーツ