自分で組み立てるテンプレート

ta-week1

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

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;	/*テキストをセンタリング*/
}

/*１行目。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

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

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を読み込みます。*/
}

/*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%;
}
.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

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;	/*テーブルの下に空けるスペース。２文字分。*/
}

/*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;	/*テーブルの下に空けるスペース。２文字分。*/
}

/*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-week1

ta-week2

ta-yoko1

ta-yoko2

ta1

ta2

ta3

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

テーブルパーツ

テーブルパーツ

テーブル一覧

ta-week1

ta-week2

ta-yoko1

ta-yoko2

ta1

ta2

ta3

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート