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

tableパーツ

table-week2

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

html

/*テーブル
---------------------------------------------------------------------------*/
.week2-parts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;	/*角を丸くする指定*/
	border: 1px solid #ccc;	/*テーブル外側の線の幅、線種、色*/
	table-layout: fixed;	/*幅を均等に*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

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

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

/*th(曜日)とtd(時間)*/
.week2-parts th,
.week2-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	border-right: 1px solid #ccc;	/*右の線の幅、線種、色*/
}

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

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

/*th(曜日)の追加指定*/
.week2-parts th {
	background: #eee;	/*背景色*/
}
.week2-parts td {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
}

css

table-week1

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

html

css

table3

テーブルレイアウト。

html

css

table2

テーブルレイアウト。

html

css

table1

オーソドックスなテーブルレイアウト。

html

css

tableパーツ

table-week2

table-week1

table3

table2

table1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

tableパーツ

table-week2

table-week1

table3

table2

table1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート