Home > 備忘録 > Web page 作成 > tableの罫線( 62 )

tableの罫線

1. HTML

<div id="demo">
	<ol class="jisaku">
	<li>罫線の例題</li>
		<table class="tdemo1">
			<thead><th>郵便番号</th><th>事業所名</th><th>備考1</th><th>備考2</th></thead>
			<tbody>
				<tr><td>2068601</td><td>稲城市役所</td><td></td><td></td></tr>
				<tr><td>1948540</td><td>東京都　町田都税事務所</td><td></td><td></td></tr>
				<tr><td>1438565</td><td>大森税務署</td><td></td><td></td></tr>
				<tr><td>1358383</td><td>東京都江東区役所</td><td></td><td></td></tr>
				<tr><td>1168507</td><td>荒川区がん予防・健康づくりセンター</td><td></td><td></td></tr>
			</tbody>
		</table>
	<li>罫線の例題</li>
		<table class="tdemo2">
			<thead><th>郵便番号</th><th>事業所名</th><th>備考1</th><th>備考2</th></thead>
			<tbody>
				<tr><td>2068601</td><td>稲城市役所</td><td></td><td></td></tr>
				<tr><td>1948540</td><td>東京都　町田都税事務所</td><td></td><td></td></tr>
				<tr><td>1438565</td><td>大森税務署</td><td></td><td></td></tr>
				<tr><td>1358383</td><td>東京都江東区役所</td><td></td><td></td></tr>
				<tr><td>1168507</td><td>荒川区がん予防・健康づくりセンター</td><td></td><td></td></tr>
			</tbody>
		</table>
	</ol>
</div>

2. スタイルシート

/*
	罫線の例題(1)(2)....の設定
*/
ol.jisaku{
	counter-reset:item 0;	/*カウンターを0にリセットして1から開始する*/
}
ol.jisaku li{		/*リストの設定*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
	white-space:nowrap;		/*自動的に改行しない*/
	margin-left:-1em;
	color:#cc0000;			/*色の指定*/
}
ol.jisaku li:before {		/*リストの左側の設定*/
	color:green;
	content:"※";
	margin-left:-1em;
}
ol.jisaku li:after {	/*リストの右側の設定*/
	counter-increment: item;							/*カウンタ名を定義する*/
	content:"(" counter(item,decimal) ")";	/*表示するデータ*/
	color:blue;		/*色の指定*/
}
/*--------------------------------------*/
table.tdemo1{	/*表全体の設定*/
	margin-left:1em;
	line-height:0.95em;
	border:1px #009090 solid;	/*外枠*/
	line-height:1.4em;			/*行の高さ*/
	margin-bottom:0.5em;
}
table.tdemo1 thead{		/*theadの設定*/
	background-color:#e0ffff;			/*背景色*/
	border-bottom: double 3px #009090;	/*下ボーダー(bouble のときは 3px 以上)*/
}
table.tdemo1 thead th:first-child{		/*1番目のth設定*/
	border-right: double 3px #009090;	/*右ボーダー(bouble のときは 3px 以上)*/
}
table.tdemo1 thead th:not(:first-child){	/*1番目以外のth設定*/
	border-right: solid 1px #009090;	/*右ボーダー*/
}
table.tdemo1 tbody tr{	/*tbodyの設定*/
	border-bottom: solid 1px #009090;	/*下水平罫線*/
}
table.tdemo1 tbody td:first-child{		/*1番目のtd設定*/
	border-right: double 3px #009090;	/*右ボーダー(bouble のときは 3px 以上)*/
}
table.tdemo1 tbody td:not(:first-child){	/*1番目以外のtd設定*/
	border-right: solid 1px #009090;	/*右ボーダー*/
}
/*--------------------------------------*/
table.tdemo2{	/*表全体の設定*/
	margin-left:1em;
	line-height:0.95em;
	border:3px #009090 double;	/*外枠(bouble のときは 3px 以上)*/
	line-height:1.4em;			/*行の高さ*/
	margin-bottom:0.5em;
}
table.tdemo2 thead{		/*theadの設定*/
	background-color:#e0ffff;			/*背景色*/
	border-bottom: double 3px #009090;	/*下ボーダー(bouble のときは 3px 以上)*/
}
table.tdemo2 thead th:first-child{		/*1番目のth設定*/
	border-right: dashed 1px #009090;	/*右ボーダー*/
}
table.tdemo2 thead th:not(:first-child){	/*1番目以外のth設定*/
	border-right: solid 1px #009090;	/*右ボーダー*/
}
table.tdemo2 tbody tr{	/*tbodyの設定*/
	border-bottom: solid 1px #009090;	/*下水平罫線*/
}
table.tdemo2 tbody td:first-child{		/*1番目のtd設定*/
	border-right: dashed 1px #009090;	/*右ボーダー*/
	text-align:center;
}
table.tdemo2 tbody td:not(:first-child){	/*1番目以外のtd設定*/
	border-right: solid 1px #009090;	/*右ボーダー*/
}
table.tdemo2 td,
table.tdemo2 th{
	padding:0 5px;
}

3. 実行結果
1. 罫線の例題

郵便番号	事業所名	備考1	備考2
2068601	稲城市役所
1948540	東京都　町田都税事務所
1438565	大森税務署
1358383	東京都江東区役所
1168507	荒川区がん予防・健康づくりセンター

2. 罫線の例題

郵便番号	事業所名	備考1	備考2
2068601	稲城市役所
1948540	東京都　町田都税事務所
1438565	大森税務署
1358383	東京都江東区役所
1168507	荒川区がん予防・健康づくりセンター

table の角を丸くする

1. HTML

<div style="margin-left:1em;">
	<table class="tdemo3">
		<thead><th>郵便番号</th><th>事業所名</th><th>備考1</th><th>備考2</th></thead>
		<tbody>
			<tr><td>2068601</td><td>稲城市役所</td><td></td><td></td></tr>
			<tr><td>1948540</td><td>東京都　町田都税事務所</td><td></td><td></td></tr>
			<tr><td>1438565</td><td>大森税務署</td><td></td><td></td></tr>
			<tr><td>1358383</td><td>東京都江東区役所</td><td></td><td></td></tr>
			<tr><td>1168507</td><td>荒川区がん予防・健康づくりセンター</td><td></td><td></td></tr>
		</tbody>
	</table>
</div>

2. スタイルシート

table.tdemo3{
	border: solid 1px #cc0000;
	border-collapse: separate;	/* これがないと角丸が作れない */
	border-spacing: 0;
	border-radius: 6px;	/* これがないと角丸が作れない */
}
table.tdemo3 thead th,
table.tdemo3 tbody td{
	padding: 0.3em;
	border-bottom: 1px solid #cc0000;
}
table.tdemo3 thead th{
	background-color: #ffdddd;
}
table.tdemo3 thead th + th,				/* 第一列のleftが二重線になるのを防ぐ */
table.tdemo3 tbody td + td{
	border-left: 1px solid #cc0000;
}
table.tdemo3 tbody tr:last-child td{	/* bottom が二重線になるのを防ぐ */
	border-bottom: none;
}
table.tdemo3 thead tr:first-child th:first-child{	/* 左上の background-color の飛び出しを修正する */
	border-radius: calc(6px - 1px) 0 0 0;
}
table.tdemo3 thead tr:first-child th:last-child{	/* 右上の background-color の飛び出しを修正する */
	border-radius: 0 calc(6px - 1px) 0 0;
}

3. 実行結果

郵便番号	事業所名	備考1	備考2
2068601	稲城市役所
1948540	東京都　町田都税事務所
1438565	大森税務署
1358383	東京都江東区役所
1168507	荒川区がん予防・健康づくりセンター